前后端分离解决跨域问题

冷不防 2021-12-13 17:34 320阅读 0赞

![640_tp_webp_wxfrom_5][]

### 如何解决跨域问题？ ###

一、JSONP方式

最初用来解决跨域问题的方式，叫做JSONP，它的基本原理是：跨域的“资源嵌入”是被浏览器允许的。所以，可以通过一个script标签来嵌入一段来自其他服务器的脚本。由于这个脚本完全运行在当前域，无法访问第三方服务器的cookie等敏感信息，所以是安全的。

JSONP的缺点是它只能支持GET操作，没法支持POST等操作，但是由于兼容性好等优点，仍然有很多网站采用JSONP的方式公开自己的API供第三方调用。

在Angular中，$http内置了对JSONP的支持，它的调用接口也和其他方法没什么区别，使用起来非常简单。

二、反向代理方式

要想解决跨域问题，最简单彻底的方法当然是把他们拉到一个域下，而这就是该“反向代理”发挥作用的时候了。

所谓反向代理，就是在自己的域名下架设一个Web服务器，这个服务器会把请求转发给第三方服务器，然后把结果返回给客户端。这时候，在客户端看来，自己就是在和这台反向代理服务器打交道，而不知道第三方服务器的存在。

这里仅以nginx为例来示范反向代理的配置方式。

server {
        listen 80;
        server_name your.domain.name;
        location / {
            proxy_pass http://localhost:5000/; # 把根路径下的请求转发给前端工具链（如gulp）打开的开发服务器，如果是产品环境，则使用root等指令配置为静态文件服务器
        }
        location /api/ {
            proxy_pass http://localhost:8080/service/; # 吧 /api 路径下的请求转发给真正的后端服务器
            proxy_set_header Host $http_host;  # 把host头传过去，后端服务程序将收到your.domain.name，否则收到的是localhost:8080
            proxy_cookie_path /api /service;   # 把cookie中的path部分从/api替换成/service
            proxy_cookie_domain localhost:8080 your.domain.name; # 把cookie的path部分从localhost:8080替换成your.domain.name
        }
    }

三、CORS方式

这是W3C提供的另一种跨域方式。作为一项标准的跨域规范，CORS本应该是最值得采用的。 问题在于，老式浏览器支持CORS，而我们显然还没到可以无视老式浏览器的时候。 所以，只要有可能，就应该优先采用反向代理的方式。

CORS的原理是基于服务方授权的模式，也就是说提供服务的程序要主动通过CORS回应头来声明自己信任哪些源（协议+域名+端口）。 由于得到了服务方的授权，浏览器就可以放行来自这些域的请求了。

[640_tp_webp_wxfrom_5]: /images/20211213/198d07f1e25d459498418b8f6e0cda68.png