前后端分离跨域问题解决

最新推荐文章于 2024-06-26 10:33:19 发布

brucekankan

最新推荐文章于 2024-06-26 10:33:19 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：网络文章标签：前后端分离跨域 CORS ajax

本文链接：https://blog.youkuaiyun.com/jijianshuai/article/details/78623093

网络专栏收录该内容

24 篇文章

订阅专栏

本文详细解释了HTTP跨域请求的工作原理，包括如何通过后端响应头中的Access-Control-Allow-Origin来验证请求来源，以及如何利用nginx等反向代理工具或Node.js来解决跨域问题。此外还介绍了如何在代码中或通过第三方包配置跨域支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跨域的实现原理

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。

想了解更多精彩内容请关注我的公众号