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

全文目录,一步到位

1.前言简介
[2. nignx角度解决方案](#2. nignx角度解决方案)
- [2.1 分析问题原因](#2.1 分析问题原因)
- - [2.1.1 翻译一波](#2.1.1 翻译一波)
  - [2.1.2 分析及解决方案](#2.1.2 分析及解决方案)
- [2.2 nginx配置如下](#2.2 nginx配置如下)
- - [2.2.1 增加一个代理配置](#2.2.1 增加一个代理配置)
  - - 示例代码:
  - [2.2.2 使用方式](#2.2.2 使用方式)
- [2.3 问题解决](#2.3 问题解决)
- - [2.3.1 改完不生效](#2.3.1 改完不生效)
[3. 其他解决方案](#3. 其他解决方案)

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 增加一个代理配置

位置如下

示例代码:

bash 复制代码

  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 改完不生效

重启nginx服务

清除浏览器缓存/更换浏览器

可以使用postman/apipost尝试

如果nginx是docker部署的可以去看看容器内配置是否与本地挂载目录配置相同

确认一下位置是否正确

3. 其他解决方案

前端解决

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

作者pingzhuyan 感谢观看