解决同源政策限制的三种方案

约定不等于承诺〃 2023-07-15 04:55 16阅读 0赞

**何为同源政策**

如果两个页面拥有相同的协议、域名、端口，就是同源，有一个不同，就是不同源。由于同源政策，Ajax只能在同一个服务器中发送数据，无法向非同源地址发送Ajax请求。

在不同源的页面中发送请求，即是跨域。

**产生原因**

同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。

可是在实际项目开发中，我们需要请求其他服务器上的接口，比如：调用腾讯天气中的查询未来7天的天气接口，应该如何做呢？下面给出三种方式供大家参考：

**JSONP—JSON with Padding**

JSONP利用的是script标签中的src属性，因为src属性是不受同源政策的影响的，比如：我们经常在HTML文件中引入jQuery：  
![在这里插入图片描述][20200315145807862.png]  
使用方式：  
  1.将不同源的服务器端请求地址写在script标签的src属性中

<script src="非同源的服务器地址"></script>

2.服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数

app.get('/test', (req, res) => {
    	const result = 'fn({name: "张三"})';
    	res.send(result);
    });

3.在客户端全局作用域下定义函数fn（函数需要定义在script标签上，因为用到了返回的数据fn）

4.在fn函数内部对服务器返回的数据进行处理

function fn(data){
        console.log('客户端的函数fn被调用了');
        console.log(data);            
    }

**CORS—Cross Origin Resource Sharing**

CORS即跨域资源共享，它允许浏览器向跨域服务器发送Ajax请求，克服了Ajax只能同源使用的限制。

使用方式：客户端不需要做改变，服务器端加上两个响应头即可

// 1.允许哪些客户端访问我 * 代表允许所有的客户端访问我
    res.header('Access-Control-Allow-Origin', '*')
    // 2.允许客户端使用哪些请求方法访问我
    res.header('Access-Control-Allow-Methods', 'get, post')

**服务器端的方案—"曲线救国"**

因为服务器端不存在同源政策的限制，假设1号客户端请求2号服务器端，可以采用1号服务器端访问2号服务器端，然后把数据响应给1号客户端，这样就绕开了浏览器的同源政策的限制。

1号服务器端访问2号服务器端需要依赖三方模块request：

①.安装

npm install request

②.引入

const request = require('request');

③.在1号服务器端的请求中请求2号服务器端

request('2号服务器地址', (err, response, body) => {
    	// body 是请求回来的数据
    	res.send(body);
    })

**withCredentials属性，运行请求携带cookie信息**

在使用Ajax技术发送跨域请求时，默认不会再请求中携带cookie信息，如果希望携带cookie信息，需要设置withCredentials属性。

1.客户端配置Ajax对象携带cookie信息

xhr.withCredentials = true

2.服务器端允许客户端请求携带cookie

res.header('Access-Control-Allow-Credentials', 'true')

[20200315145807862.png]: /images/20230529/82cb507a39054b66a8b9e2f0b3a27f22.png

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关同源政策 (SOP)

了解什么是同源策略 (SOP)，以及它对 Web 开发人员的意义。什么是同源策略？同源策略是一组设计原则，用于管理 Web 浏览器功能的实现方式。其目的是将浏览

阳光穿透心脏的1/2处/ 2023年09月27日 08:16/ 0 赞/ 417 阅读

相关解决同源政策限制的三种方案

何为同源政策如果两个页面拥有相同的协议、域名、端口，就是同源，有一个不同，就是不同源。由于同源政策，Ajax只能在同一个服务器中发送数据，无法向非同源地址发送Ajax请

约定不等于承诺〃/ 2023年07月15日 04:55/ 0 赞/ 17 阅读

相关同源策略和跨域解决方案

https://blog.csdn.net/weixin\_43727372/article/details/101218626?utm\_medium=distribute.

末蓝、/ 2022年09月13日 05:18/ 0 赞/ 258 阅读

相关 JS-同源限制

我们举例说明：比如一个黑客程序，他利用 `Iframe` 把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过 `Javascript` 读

电玩女神/ 2022年07月15日 09:45/ 0 赞/ 70 阅读

相关【前端】浏览器同源政策及其规避方法

浏览器安全的基石是"同源政策"（[same-origin policy][]）。很多开发者都知道这一点，但了解得不全面。本文详细介绍"同源政策"的各个方面，以及如何规避它。

迷南。/ 2022年06月03日 07:54/ 0 赞/ 173 阅读

相关浏览器同源政策之ajax请求不能发送

同源政策（same-origin policy）是浏览器安全的基石同源指的是三个相同 ![这里写图片描述][70] 限制范围（1） Cookie、Loca

港控/mmm°/ 2022年05月25日 01:59/ 0 赞/ 201 阅读

相关浏览器同源政策及其规避方法

浏览器安全的基石是"同源政策"（[same-origin policy][]）。很多开发者都知道这一点，但了解得不全面。本文详细介绍"同源政策"的各个方面，以及如何规避它。

冷不防/ 2022年05月24日 07:20/ 0 赞/ 187 阅读

相关同源策略、跨域解决方案

[https://segmentfault.com/a/1190000012469713][https_segmentfault.com_a_1190000012469713]

刺骨的言语ヽ痛彻心扉/ 2022年01月13日 13:11/ 0 赞/ 355 阅读

相关【前端必备基础】同源政策

同源政策三大要素 1. 协议 2. 域名 3. 端口号 > 例如：http://www.baidu.com/这个网址就是一个源 ,他的三要素 > \-

缺乏、安全感/ 2021年12月21日 15:55/ 0 赞/ 352 阅读

相关跨域的同源政策是什么意思？

跨域的同源政策是什么意思？同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。所谓"同源"指的是"三个相同"。 > * 协议相同 > * ...

朱雀/ 2020年06月25日 09:18/ 1 赞/ 919 阅读