前后端分离 跨域问题解决

2017-11-24 19:36:06来源:CSDN作者:jijianshuai人点击

分享

跨域的实现原理

http 跨域请求后端服务的时候会在请求头中带上如下信息

Origin: http://api.jijs.com

后端服务器需要在http的响应头中添加以下响应头

Access-Control-Allow-Origin : http://api.jijs.com

接收到请求后,并验证该站点是否支持跨域请求。
如果前端没有收到该相应头,则浏览器不允许跨域请求的。

跨域解决方案

跨域问题可以通过nginx或其它的反向代理软件配置实现。
也可以使用node.js 通过后台转发请求来解决跨域问题。(后端请求是不存在跨域问题的)

开发项目解析跨域可以通过如下两中方式解决。

1.代码中设置

    this.response.addHeader("Access-Control-Allow-Origin", "*");    this.response.addHeader("Access-Control-Allow-Methods", "get, post, put, delete, options");    this.response.addHeader("Access-Control-Allow-Headers", "origin, content-type, accept");    this.response.addHeader("Access-Control-Allow-Credentials", "true");

配置Access-Control-Allow相关的响应的头

2. 使用第三方包过滤器中设置

依赖的maven

<dependency>    <groupId>com.thetransactioncompany</groupId>    <artifactId>cors-filter</artifactId>    <version>2.6</version></dependency>

项目中web.xml中的配置如下:

<filter>      <filter-name>CORS</filter-name>      <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>      <init-param>       <param-name>cors.allowOrigin</param-name>          <param-value>*</param-value>      </init-param>      <init-param>       <param-name>cors.supportedMethods</param-name>          <param-value>GET, POST, HEAD, PUT, DELETE</param-value>      </init-param>      <init-param>       <param-name>cors.supportedHeaders</param-name>          <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>      </init-param>      <init-param>          <param-name>cors.exposedHeaders</param-name>          <param-value>Set-Cookie</param-value>      </init-param>      <init-param>          <param-name>cors.supportsCredentials</param-name>          <param-value>true</param-value>      </init-param>  </filter>  <filter-mapping>      <filter-name>CORS</filter-name>      <url-pattern>/*</url-pattern>  </filter-mapping>  

支持cookies

响应头中需要添加下面信息

Access-Control-Allow-Credentials:true

Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏览器发送Cookie,删除该字段即可。

Access-Control-Allow-Origin:http://api.jijs.com

需要注意的是,如果要发送Cookie,Access-Control-Allow-Origin就不能设为星号,必须指定明确的、与请求网页一致的域名。同时,Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台