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

全文目录,一步到位

1.前言简介
2. nignx角度解决方案
3. 其他解决方案

1.前言简介

先看报错信息:

2. nignx角度解决方案

2.1 分析问题原因

2.1.1 翻译一波

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

2.1.2 分析及解决方案

分析

解决方案:

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