【前端跨域】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 解决跨域_布衣枭枭的博客