nginx配置代理请求接口出现CORS error

Wait A Minute

已于 2024-09-24 10:13:28 修改

阅读量223

点赞数 7

文章标签： nginx 运维

于 2024-09-24 10:11:25 首次发布

本文链接：https://blog.csdn.net/weixin_43493318/article/details/142482099

版权

nginx配置请求出现CORS error

- 解释：
- 解决方法：

CORS（Cross-Origin Resource Sharing，跨源资源共享）错误通常发生在Web应用尝试从与其自身所在的域（origin）不同的域（origin）发起请求获取资源时。

解释：

当一个页面尝试通过XMLHttpRequest向与自己不同的域、协议、端口发送请求时，浏览器为了安全会阻止这种请求。如果目标服务器在响应头中没有明确地指出允许其他域的脚本访问资源，浏览器会阻止访问并在控制台中报出CORS错误。

解决方法：

1、修改Nginx配置文件，添加相应的add_header指令来设置Access-Control-Allow-Origin响应头。例如，允许所有域访问：

location / {
    add_header 'Access-Control-Allow-Origin' '*';
    ...
}

或者，只允许特定域访问：

location / {
    add_header 'Access-Control-Allow-Origin' 'http://example.com';
    ...
}

2、如果是预检请求（preflight request），确保Nginx配置中包含对OPTIONS方法的处理：

location / {
    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,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
    ...
}

3、重启Nginx服务使配置生效。

确保在生产环境中根据实际需求设置Access-Control-Allow-Origin的值，不要随意使用*（表示允许所有域），以避免潜在的安全风险。

示例：

	server {
        listen 8980;
        server_name  localhost;
		
        location / {
			root	E:\WebRoot;
            index  index.html index.htm;
        }
		
		# 后台代理
		location /js {
			add_header 'Access-Control-Allow-Origin' '*';
			proxy_pass ip:host;
		}
	}