nginx代理-解决CORS跨域问题: Access to XMLHttpRequest at XXX from XXX

---

1.前言简介

先看报错信息:

Access to XMLHttpRequest at ‘https://apis.map.qq.com/ws/geocoder/v1/?address=&key=&get_poi=*’ from origin ‘https://域名’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

2. nignx角度解决方案

2.1 分析问题原因

场景: 前端自己请求地图, 没有通过后端服务
所以只能在nginx代理中去添加配置

2.1.1 翻译一波

从https://***源访问https://apis.map.qq.com/ws/geocoder/v1/的XMLHttpRequest已被CORS策略阻止:在被请求的资源上没有Access- control - allow - origin头。

2.1.2 分析及解决方案

分析

腾讯地图的api 报跨域,

• 后端需要通过服务器代理
• 设置请求头在转发到 腾讯地图地址

解决方案:

经过多次测试, 选定一个方案
创建一个路径 起名/map/v1/ (特别注意最后面的 /)
修改nginx配置conf
添加 此路径location

2.2 nginx配置如下

2.2.1 增加一个代理配置

位置如下

示例代码:

  location /map/v/ {  
    
        # 路径重写
        rewrite /map/v/(.*)$ /$1 break;
        proxy_pass https://apis.map.qq.com;  
         # proxy_pass https://www.baidu.com/;服务器托管  
        
         #proxy_set_header Host $host;  
         #proxy_set_header X-Real-IP $remote_addr;  
         #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
         #proxy_set_header X-Forwarded-Proto $scheme;  
  
   服务器托管     # 添加CORS响应头部  
        add_header 'Access-Control-Allow-Origin' '*';  
        add_header 'Access-Control-Allow-Methods' '*';  
        add_header 'Access-Control-Allow-Headers' '*';  
        add_header 'Access-Control-Max-Age' 1728000;  
  
        # 对于预检请求（OPTIONS），直接返回200  
        if ($request_method = OPTIONS) {  
            return 204;  
        }  
    }  

2.2.2 使用方式

原来请求: https://apis.map.qq.com/ws/geocoder/v1/…
现在请求: https://你的域名/map/v/…

2.3 问题解决

2.3.1 改完不生效

1. 重启nginx服务
2. 清除浏览器缓存/更换浏览器
3. 可以使用postman/apipost尝试
4. 如果nginx是docker部署的 可以去看看容器内配置是否与本地挂载目录配置相同
5. 确认一下位置是否正确

3. 其他解决方案

前端解决
或者后端服务远程调用 服务内配置跨域(不推荐)

---

作者pingzhuyan 感谢观看

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net