跨域问题，怎么解决

Question

  var lng=result.geocodes[0].location.lng;
            var lat=result.geocodes[0].location.lat;
           $.ajax({
                  url:'https://zhihui.farm/markets/'+lng+','+lat+'?limit=2',
                  type:'get',
                  dataType:'json',
                  beforeSend: function(request) {
                    request.setRequestHeader("Authorization", "JWT eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6IjUxYTRjNzg5LTc5ODQtNDE4Mi1iZTFlLWYxYWI0M2E5YzU0MyIsImV4cCI6MTUxNTcyMzQ5My41NTJ9.r131dQYaCYO4hK_vzLLZf6NDhBuiARsyS5sw1H3D2ko");
                  },
                  success:function(data){
                    console.log(data);
                  }, 
                  error : function(errorMsg) {
                    alert("数据请求失败");
                }
              });   

浏览器报的错误：Failed to load https://zhihui.farm/markets/117.251587,39.128291?limit=2: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Ori

gin' header has a value 'http://localhost:3001' that is not equal to the supplied origin. Origin 'http://192.168.11.203:3001' is therefore not allowed access.

怎么解决！？

Answer 1

服务端无法配置跨域白名单的话，可以使用代理，将其转化为同一个域下，gulp，webpack都有相应的配置

Answer 2

其实都是你自己的项目吧，只不过你是在本地开发，访问的线上的接口 如果是的话 考虑部署环境

Answer 3

nginx反向代理

Answer 4

    dataType:'jsonp',

Answer 5

hosts修改

Answer 6

我写了一些关于 ajax 的跨域问题和方案总结, 如果真的想知道前因后果，不妨看看。

• 跨域问题之ajax

• 跨域问题之jsonp

Answer 7

如果楼主是在开发阶段,上线后确定是同一个域名的话，可以让谷歌浏览器取消跨域,
目标设置成: --args --disable-web-security --user-data-dir'

如果必须要处理跨域的话,那么就使用jsonp

Answer 8

Nginx解决跨域问题

Answer 9

方式很多：

     1:服务端配置cors跨域设置access-control-allow-origin（最推荐！）
     2:通过nginx等转发代理
     3:如果只是开发环境下跨域，生产环境同域，最简单的方式直接装一个chrome插件allow-control-allow-origin
     4:其他jsonp，window.name，iframe之类的方式等，个人不太推荐了，限制太多，有点类似hack的方式

Answer 10

你在头部添加了 Authorization ，即需要先发送 OPTION 请求，询问服务器是否允许请求头有 Authorization 这非default 属性，若没有就算你配置了服务器允许跨域访问，但因这个而被拦截了
首先在服务器允许，当然在代码中也可以，我以 nginx 为例子

    location ~ .*\.(php|php5)?$  
    {  
      # 当OPTIONS时允许通过，且返回204
      if ($request_method = 'OPTIONS') {  
        # 允许跨域地址
        add_header Access-Control-Allow-Origin *;  
        # 当该标志为真时，响应于该请求是否可以被暴露
        add_header Access-Control-Allow-Credentials true; 
        # 允许的请求类型 
        add_header Access-Control-Allow-Methods 'GET, POST, PUT,OPTIONS';  
        # 允许的自定义（这里只是列举一些，如题主主要加上 Authorization 就可）
        add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';  
       
        return 204;  
      }  
   
      fastcgi_pass   127.0.0.1:9000;  
      fastcgi_index index.php;  
      fastcgi_param  SCRIPT_FILENAME  /usr/local/www/$fastcgi_script_name;  
      include        fastcgi_params;  
    }