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

pingzhuyan

已于 2024-05-27 09:59:16 修改

阅读量1.9k

点赞数 24

分类专栏： # 异常总结分类文章标签： nginx 运维 java

于 2024-04-06 11:08:15 首次发布

本文链接：https://blog.csdn.net/pingzhuyan/article/details/136964127

版权

异常总结分类专栏收录该内容

22 篇文章 0 订阅

订阅专栏

全文目录,一步到位

1.前言简介
2. nignx角度解决方案
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 增加一个代理配置

位置如下

示例代码:

  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;  
        }  
    }