nginx配置支持跨域

将下面的一段配置放入项目的nginx配置文件的location区域里面;

location ~ \.php($|/) {
	#满足规则的域名判断
	if ($http_origin ~* "^https?://[a-z0-9]+\.domain\.com$" ) {
      	add_header access-control-allow-credentials true always;
        add_header access-control-allow-headers 'Authorization, x-requested-with, Content-Type' always;
        add_header access-control-allow-methods 'OPTIONS, GET, POST, PUT, PATCH, DELETE' always;
        add_header access-control-allow-origin $http_origin always;
	}
	#...
}
### 配置Nginx支持Vue项目的访问 为了使 Vue 应用能够通过 Nginx 正常发起请求,需在 Nginx配置文件中设置相应的 CORS 头。这可以通过编辑 `nginx.conf` 或者站点特定的 `.conf` 文件完成。 #### 修改Nginx配置文件 在 HTTP 或 server 块内加入如下所示的配置: ```nginx server { listen 80; server_name localhost; location /api/ { 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,BeginRequestTimestamp,Cookie,Content-Type'; 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; return 204; } proxy_pass http://backend_server_address; # 将此替换为目标服务器的实际地址 } } ``` 上述代码片段定义了一个名为 `/api/` 的路径前缀,任何以此开头的 URL 请求都将被转发给指定的目标服务器,并附带必要的 CORS 相关响应头[^1]。 对于更复杂的场景,比如需要针对具体来源开放权限而不是通配符 (*) ,则应调整 `'Access-Control-Allow-Origin'` 的值为具体的 URI 。另外,在某些情况下可能还需要启用凭证共享功能(即 cookies 和其他认证信息),此时应在相应位置添加 `add_header 'Access-Control-Allow-Credentials' 'true';` 并确保前端也设置了正确的选项[^3]。 #### 测试更改后的配置 保存修改并重启 Nginx 服务让新配置生效。之后可以从开发工具网络面板查看实际发出的预检 (Preflight) 及后续数据获取请求是否带有预期的 CORS 标记以及状态码是否正常[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值