nginx 解决跨域问题记录

本文介绍了如何在前端Vue项目中使用axios进行API请求,并展示了后端SpringBoot的配置,以及Nginx服务器的跨域设置,确保前端与后端的顺利交互。通过设置Access-Control-Allow-*头信息,实现了跨域访问,同时在Nginx中配置了代理以处理请求。

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

前端页面

采用Vue axios发出请求

script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var a = new Vue({
            el:"#app",
            data:{
                url:""
            },
            methods:{
                test:function(){
                axios.get("http://test.com/test")
                .then(function(response){
                    console.log(response.data)
                })
                }
            }
        })
    </script>

后台 springboot


@RestController

public class MyController {
    @Autowired
    User user;
    @RequestMapping("/test")
    public User test(){
        return user;
    }
}

nginx 文件配置 (重点)

 server {
        listen       80;
        server_name  test.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

	#是否允许请求带有验证信息
	add_header Access-Control-Allow-Credentials true;
	#允许跨域访问的域名,可以是一个域的列表,空格隔开,也可以是通配符*(不建议)
	add_header Access-Control-Allow-Origin  *;
	#允许使用的请求方法,以逗号隔开,可以用 *
	add_header Access-Control-Allow-Methods 'POST,GET,OPTIONS,PUT,DELETE';
	#预检命令的缓存,如果不缓存每次会发送两次请求,单位为秒。
	#第一次是浏览器使用OPTIONS方法发起一个预检请求,第二次才是真正的异步请求
    add_header Access-Control-Max-Age 3600;
    
	#允许脚本访问的返回头
	add_header Access-Control-Allow-Headers 'x-requested-with,content-type,Cache-Control,Pragma,Date,x-timestamp';	
	#允许自定义的头部,以逗号隔开,大小写不敏感
	add_header Access-Control-Expose-Headers 'WWW-Authenticate,Server-Authorization';
	#P3P支持跨域cookie操作
	add_header P3P 'policyref="/w3c/p3p.xml", CP="NOI DSP PSAa OUR BUS IND ONL UNI COM NAV INT LOC"';
	
        location / {
         #   root   html;
         #  index  index.html index.htm;
         proxy_pass  http://127.0.0.1:8080;
        }
#是否允许请求带有验证信息
add_header Access-Control-Allow-Credentials true;
#允许跨域访问的域名,可以是一个域的列表,空格隔开,也可以是通配符*(不建议)
add_header Access-Control-Allow-Origin  *;
#允许使用的请求方法,以逗号隔开,可以用 *
add_header Access-Control-Allow-Methods 'POST,GET,OPTIONS,PUT,DELETE';
#预检命令的缓存,如果不缓存每次会发送两次请求,单位为秒。
#第一次是浏览器使用OPTIONS方法发起一个预检请求,第二次才是真正的异步请求
add_header Access-Control-Max-Age 3600;

#允许脚本访问的返回头
add_header Access-Control-Allow-Headers 'x-requested-with,content-type,Cache-Control,Pragma,Date,x-timestamp';	
#允许自定义的头部,以逗号隔开,大小写不敏感
add_header Access-Control-Expose-Headers 'WWW-Authenticate,Server-Authorization';
#P3P支持跨域cookie操作
add_header P3P 'policyref="/w3c/p3p.xml", CP="NOI DSP PSAa OUR BUS IND ONL UNI COM NAV INT LOC"';

请求成功页

在这里插入图片描述

### 一、Nginx CORS 问题概述 在现代 Web 应用开发中,资源共享(CORS)是一个常见的需求。由于浏览器的安全机制——同源策略的存在,客户端无法直接向不同名下的服务发起请求。为了实现安全的通信,可以通过配置 Nginx 来支持 CORS 请求[^1]。 --- ### 二、Nginx 配置解决生产环境中的 CORS 问题 以下是针对生产环境中可能遇到的情况设计的一个完整的 Nginx 配置方案: #### 1. 基本配置 对于简单的 GET 或 POST 请求,可以直接添加以下头部信息来允许特定来源访问资源: ```nginx location /api/ { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type'; if ($request_method = OPTIONS) { return 204; } } ``` 上述配置解释如下: - `add_header 'Access-Control-Allow-Origin' '*'` 表示允许任何来源访问资源。如果仅需指定某些来源,则替换为具体名,例如 `'https://example.com'`[^3]。 - `add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';` 定义了允许使用的 HTTP 方法。 - `if ($request_method = OPTIONS)` 处理预检请求 (preflight request),返回状态码 `204 No Content` 表明无需进一步操作[^4]。 --- #### 2. 支持认证与复杂场景 当涉及敏感数据传输或需要身份验证时,应调整配置以适应更复杂的场景: ```nginx location /api/authenticated-endpoint/ { set $cors_origin ''; if ($http_origin ~* '(https?://)(www\.)?(domain1\.com|domain2\.org)$') { set $cors_origin "$http_origin"; } add_header 'Access-Control-Allow-Origin' "$cors_origin" always; add_header 'Access-Control-Allow-Credentials' 'true' always; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always; if ($request_method = OPTIONS) { return 204; } } ``` 此部分的关键点在于: - 使用 `$http_origin` 动态匹配合法来源并将其赋值给变量 `$cors_origin`,从而增强灵活性和安全性[^2]。 - 设置 `Access-Control-Allow-Credentials` 为 `true` 后,必须显式定义 `Access-Control-Allow-Origin` 的值而不能使用通配符 `*`。 --- #### 3. 错误排查与调试建议 即使完成了基本配置,在实际部署过程中仍可能出现一些意外情况。此时可采取以下措施进行诊断: - **启用日志记录**:增加详细的错误日志以便定位问题所在。 ```nginx error_log /var/log/nginx/error.log debug; access_log /var/log/nginx/access.log main; ``` - **测试工具辅助**:利用 Postman 或 curl 工具模拟发送带有自定义头的信息至目标 URL 并观察响应行为。 ```bash curl -X OPTIONS http://your-domain/api/test \ -H "Origin: https://allowed-origin.example.com" \ -H "Access-Control-Request-Method: POST" ``` --- ### 三、总结 通过合理配置 Nginx 可有效应对生产环境下因同源策略引发的各种挑战。无论是基础功能还是高级特性都应在充分理解原理的基础上实施优化,确保应用既满足业务需求又兼顾性能表现。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值