前端进阶（十九）前后端跨域问题

ゝ一世哀愁。 2021-12-01 10:50 349阅读 0赞

> 一、什么是跨域？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是**浏览器施加的**安全限制。

> 二、什么是同源策略？

**所谓同源是指，域名，协议，端口均相同。如下是跨域规则详细举例：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70][]

> 三、跨域问题分类

1、**接口跨域**

前后端分离时，前端为了获取后端数据而跨域。**本文主要探讨接口跨域**。

如需要了解更多跨域知识，详见：[https://segmentfault.com/a/1190000011145364][https_segmentfault.com_a_1190000011145364]

2、前端页面通信

为不同域下的前端页面通信而跨域。

> 四、接口跨域

1、jsonp

原理：利用script标签漏洞. 但是仅限于get请求。

服务端返回：

getJsonData({"status": true, "user": "admin"})

2、**反向代理(推荐使用)**

通过Nginx监听同端口，同域名的访问，不同路径映射到不同的地址。

实现原理：相当于绕过了浏览器端，自然就不存在跨域问题。

server {
            listen       80;
            server_name  admin.com;
            #charset koi8-r;
            #access_log  logs/host.access.log  main;
    
            location /client { #访问客户端路径
                proxy_pass http://localhost:8080;
                proxy_redirect default;
            }
            location /apis { #访问服务器路径
                rewrite  ^/apis/(.*)$ /$1 break;
                proxy_pass   http://localhost:8081;
           }
    }

3、跨域资源共享-CROS

(1)不带cookie

前端无需设置，后端需设置

header('Access-Control-Allow-Credentials', '*');
    或者设置白名单
    header('Access-Control-Allow-Credentials', '白名单');

还可以设置访问方式

header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

(2)带cookie

前端后端都需设置。

前端设置，即前端请求时需要带上cookie，包括原生xhr请求，ajax请求、fetch请求，axios请求等都需要带上cookie。拿axios举例

axios.defaults.withCredentials = true

后端设置：

node.js

// 数据接收完毕
        req.addListener('end', function() {
            postData = qs.parse(postData);
    
            // 跨域后台设置
            res.writeHead(200, {
                'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie
                'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域（协议+域名+端口）
                /* 
                 * 此处设置的cookie还是domain2的而非domain1，因为后端也不能跨域写cookie(nginx反向代理可以实现)，
                 * 但只要domain2中写入一次cookie认证，后面的跨域接口都能从domain2中获取cookie，从而实现所有的接口都能跨域访问
                 */
                'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'  // HttpOnly的作用是让js无法读取cookie
            });
    
            res.write(JSON.stringify(postData));
            res.end();
        });

java

/*
     * 导入包：import javax.servlet.http.HttpServletResponse;
     * 接口参数中定义：HttpServletResponse response
     */
    
    // 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/'
    response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 
    
    // 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示
    response.setHeader("Access-Control-Allow-Credentials", "true"); 
    
    // 提示OPTIONS预检时，后端需要设置的两个常用自定义头
    response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

> 五、参考资料

1、[https://blog.csdn.net/lambert310/article/details/51683775][https_blog.csdn.net_lambert310_article_details_51683775]

2、[https://www.jianshu.com/p/d9de7a5c4673][https_www.jianshu.com_p_d9de7a5c4673]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70]: /images/20211201/a22b827ffe0b4100b1d3746025031f16.png
[https_segmentfault.com_a_1190000011145364]: https://segmentfault.com/a/1190000011145364
[https_blog.csdn.net_lambert310_article_details_51683775]: https://blog.csdn.net/lambert310/article/details/51683775
[https_www.jianshu.com_p_d9de7a5c4673]: https://www.jianshu.com/p/d9de7a5c4673