【nginx跨域】

最新推荐文章于 2025-11-03 09:59:20 发布

原创最新推荐文章于 2025-11-03 09:59:20 发布 · 764 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #运维

本文介绍了跨域问题的基本概念，指出请求的同域与跨域规则，并提供了两个配置示例，展示了如何通过设置Access-Control-Allow-Origin等HTTP头来允许跨域请求，以及处理OPTIONS请求的特殊性。

参考：https://blog.youkuaiyun.com/weixin_37855495/article/details/130082400

1、什么是跨域

最近在地理信息项目实施的过程中遇到了跨域请求的问题。
首先，一个请求的url由3部分组成：协议，请求，端口。
如果这3部分都相同，那么就是同域，有一个不通，都可以认为是跨域请求。
例如：test1.cn是一个网站，那么访问test1.cn/list/getInfo这个请求可以认为是同域的请求，test2.cn/list/getInfo就是跨域请求了，包括test1.cn:8080/list/getInfo也是跨域请求。

2、跨域的配置

设置允许跨域的配置示例如下，可以根据实际需要自行修改：

示例一
location / {
    # 允许跨域的请求，可以自定义变量$http_origin，*表示所有
    add_header 'Access-Control-Allow-Origin' *;
    # 允许携带cookie请求
    add_header 'Access-Control-Allow-Credentials' 'true';
    # 允许跨域请求的方法：GET,POST,OPTIONS,PUT
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT';
    # 允许请求时携带的头部信息，*表示所有
    add_header 'Access-Control-Allow-Headers' *;
    # 允许发送按段获取资源的请求
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    # 一定要有！！！否则Post请求无法进行跨域！
    # 在发送Post跨域请求前，会以Options方式发送预检请求，服务器接受时才会正式请求
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        # 对于Options方式的请求返回204，表示接受跨域请求
        return 204;
    }
}

示例二
location /test {
	#代理地址
	proxy_pass http://192,168.1.128:80880;
	#判断跨域请求
	if ($request_method = 'OPTIONS') {
		#允许请求地址跨域
		add_header 'Access-Control-Allow-Origin' * always;
		#允许cookie传输
		add_header 'Access-Control-Allow-Credentials' 'true';
		#允许跨域的请求方法
		add_header 'Access-Control-Allow-Methods' 'GET,POST,HEAD,OPTIONS';
		add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
		retun 204;
	}
	#禁止缓存，每次都从服务器请求
	add_header Cache-Control no-store;
}