【前端跨域】CORS跨域问题解决思路

目录

一、Nginx跨域配置

二、Spring项目跨域配置

参考资料

---

一、Nginx跨域配置

在 Nginx 中配置跨域请求，主要可以通过设置 HTTP 响应头部的方式进行。以下是具体实现步骤：

1. 在 Nginx 的配置文件中找到对应 location 配置块，例如：

server {     listen 80;     server_name example.com;     location /api {         proxy_pass http://127.0.0.1:8080;     } }

1. 在 location 配置块中添加如下 HTTP 响应头部设置：

location /api {     add_header 'Access-Control-Allow-Origin' '*';     add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';     add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';     add_header 'Access-Control-Allow-Credentials' 'true';     add_header 'Access-Control-Max-Age' 1728000;     if ($request_method = 'OPTIONS') {         add_header 'Access-Control-Allow-Origin' '*';         add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';         add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';         add_header 'Access-Control-Allow-Credentials' 'true';         add_header 'Access-Control-Max-Age' 1728000;         add_header 'Content-Type' 'text/plain charset=UTF-8';         add_header 'Content-Length' 0;         return 204;     }     proxy_pass http://127.0.0.1:8080; }

其中：

• add_header 'Access-Control-Allow-Origin' '*' 表示允许所有的跨域请求。
• add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' 表示允许的请求方法。
• add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' 表示允许的请求头部信息。
• add_header 'Access-Control-Allow-Credentials' 'true' 表示允许发送 cookies 到服务器端。
• add_header 'Access-Control-Max-Age' 1728000 表示跨域预检请求的有效时间。
• if ($request_method = 'OPTIONS') {...} 表示处理 preflight 请求。

通过以上配置，就可以在 Nginx 中配置跨域请求，保证前端页面可以跨域访问服务端资源。

二、Spring项目跨域配置

参考资料

springMVC 跨域问题解决方案_java springmvc 解决跨域_布衣枭枭的博客-CSDN博客