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

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

3. 其他解决方案

前端解决

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


作者pingzhuyan 感谢观看

相关推荐
tellmewhoisi11 分钟前
java8 List常用基本操作(去重,排序,转换等)
java·list
呉師傅29 分钟前
佳能iR-ADV C5560复印机如何扫描文件到电脑
运维·网络·windows·计算机外设·电脑
都叫我大帅哥41 分钟前
TOGAF应用架构阶段全解析:从理论到Java代码实战
java
半梦半醒*1 小时前
Linux网络管理
linux·运维·网络·centos·运维开发
Amagi.1 小时前
Java设计模式-建造者模式
java·设计模式·建造者模式
破刺不会编程1 小时前
linux线程概念和控制
linux·运维·服务器·开发语言·c++
EmpressBoost1 小时前
谷粒商城170缓存序列化报错
java·spring·缓存
fouryears_234171 小时前
@PathVariable与@RequestParam的区别
java·spring·mvc·springboot
wxjlkh1 小时前
powershell 批量测试ip 端口 脚本
java·服务器·前端
萌新小白的逆袭2 小时前
《Maven 核心基础笔记(第一天)》
java·开发语言·spring