请求第三方api跨域问题

rsndm

我新添加了一个aspx页面到网站程序中，此页面是用纯前端的方式实现的（html、css、js），其中会有一个调用第三方接口的功能，在本地环境测试无问题，但上线到服务器后出现跨域问题，如图所示，请问大家什么办法可以解决吗？

用本地ip访问情况下

这是本地ip情况下

用服务器ip访问情况下

这是客户访问情况下，ip由127.0.0.1换成了10.2.6.230这个内网ip，于是所有接口都无法请求了

怕不是个二傻子

反向代{过}{滤}理啊 铁子

renpeng009

服务器发送允许跨域

838728713

反向代{过}{滤}理一下添加 允许头不就OK了

wihn

服务器设置一下响应标头的Access-Control-Allow-Origin等属性

jidesheng6

一个是用proxy反向代{过}{滤}理，另外一个就是设置请求头：

六、使用反向代{过}{滤}理解决跨域
假设我们前端服务绑定的域名为：front.site.com 但是我们后端服绑定的域名是：back.site.com

这样的话我们在前端js中，就无法去请求back.site.com的后端服务了，这是因为host不同导致的；所以我们可以通过配置反向代{过}{滤}理服务器来解决跨域问题，我们配置文件可以像下面这样编写：

server{
        listen 9001;
        server_name front.site.com;

        location ^~ /api/{
        proxy back.site.com;
    }
}

这样配置之后，当我们访问front.site.com/api/xxx的时候，就可以通过反向代{过}{滤}理服务器将请求back.site.com/api/xxxx，从而解决了跨域的问题，绕过了浏览器的同源策略

七、配置header解决跨域
当浏览器在访问跨源服务器时，也可以在跨域服务器上直接设置nginx配置，不需要把实际访问后端的地址改为前端地址，这样可适性更高。

假设前端站点是：fron.site.com 后端地址为：back.site.com
我们在前端站点中使用js访问后端地址，一定会触发同源策略，导致跨域问题的产生。

我们可以进行如下配置：

server{
        listen 80;
        server_name front.site.com;

        add_header 'Access-Control-Allow-Origin' $http_origin;#全局变量获得当前请求origin，带cookie的请求不支持
        add_header 'Access-Control-Allow-Credentials' 'true';#为true可带上cookie
        add_header 'Access-Control-Allow-Methods' 'GET,POST,DELETE';#允许的请求方法
        add_header 'Access-Control-Allow-Headers' $http_access_control_request_headers; #允许请求的header，可以为*
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

        if ($request_method='OPTIONS') {
        add_header 'Access-Control-Max-Age' 1728000;#OPTIONS 请求的有效期，在有效期内不用发出另一个预检请求
        add_header 'Content-Type' 'text/plain;charset=utf-8';
        add_header 'Content-Length' 0;

        return 204;#返回204状态码，或者返回200
    }

       location /{
        root /usr/share/nginx/html;
        index login.html;
}

}

myxiaowang

1.谷歌浏览器装插件
2.中间件添加跨域头 如Nginx tomcat等
3.后端代码添加允许跨域

三滑稽甲苯

服务器层面大佬都讲过了，那我就提个客户端方面的解决方案，自行编译可跨域的chrome浏览器

rsndm

感谢各位的帮助，已通过反向代{过}{滤}理成功解决了跨域，谢谢！