前后端分离如何处理跨域问题

最新推荐文章于 2024-04-11 19:58:05 发布

原创最新推荐文章于 2024-04-11 19:58:05 发布 · 747 阅读

1 ·

CC 4.0 BY-SA版权

java面试宝典专栏收录该内容

7 篇文章

订阅专栏

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
什么情况下不是跨域？

即：满足域名、协议、端口均相同的即不是跨域。

例如

http://www.b.com/index.html 调用 http://www.b.com/server （非跨域）

http://www.bone.com/index.html 调用 http://www.btwo.com/server（主域名不同:one/two，跨域）

http://www.b.com:8080/index.html 调用 http://www.b.com:8081/server （端口不同:8080/8081，跨域）

http://www.b.com/index.html 调用 https://www.b.com/server （协议不同:http/https，跨域）

解决方案：

1用nginx做web服务器，将请求转发，就没有跨域的问题了

通过反向代理服务器监听同端口，同域名的访问，不同路径映射到不同的地址，比如，在nginx服务器中，监听同一个域名和端口，不同路径转发到客户端和服务器，把不同端口和域名的限制通过反向代理，来解决跨域的问题，案例如下：

server {
        listen       80;
        server_name  domain.com;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;

        location /client { #访问客户端路径
            proxy_pass http://localhost:81;
            proxy_redirect default;
        }
        location /apis { #访问服务器路径
            rewrite  ^/apis/(.*)$ /$1 break;
            proxy_pass   http://localhost:82;
       }
}

2 CORS在后端设置响应头，把你需要运行访问的域名加入加入Access-Control-Allow-Origin中。

Cross-Origin Resource Sharing (CORS) 是W3c工作草案，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否。

x详细https://blog.youkuaiyun.com/liboyang71/article/details/77867239

3jsonp把后端根据请求，构造json数据，并返回，前端用jsonp跨域。