同源和跨域

前端小菜鸟也有人起

已于 2023-04-18 10:59:25 修改

阅读量315

点赞数 1

文章标签： node.js javascript

于 2023-04-03 08:05:28 首次发布

本文链接：https://blog.csdn.net/weixin_63730900/article/details/129920951

版权

同源策略限制了浏览器对不同源资源的访问。跨域是当协议、域名或端口不同时的情况。解决跨域的方法包括JSONP（需要服务器配合生成回调函数的JS）、CORS（服务器设置响应头允许特定域名请求）和代理（通过服务器转发请求）。

摘要由CSDN通过智能技术生成

1.什么是同源

同源指的是两个 URL 地址具有相同的协议、主机名、端口。

协议：http,https

主机名：www.test.com

主域名：test

子域名：www

端口：端口号

2.什么是跨域

跨域指的是在浏览器中访问不同源的资源时所面临的限制。同源是指协议、域名和端口号均相同的两个资源，跨域则是指其中至少一个不同。由于浏览器的安全策略，跨域请求会受到限制，如不能读取跨域请求的响应、不能发送跨域请求等。为了克服跨域限制，常用的方法包括 JSONP、CORS、iframe、代理等。

jsonp

- 使用dom操作，创建一个script标签，去请求某个服务器，服务器需要设置一个回调函数名及参数
- 要自己写一个回调函数，当服务器返回js文件时会触发这个函数
- 动态创建script标签元素(document.createElement('script'))
- 把动态创建的这个脚本，插入到html中，让浏览器开始解析，并下载相关js，作用是规避浏览器的跨域管制
- 当请求js完成时，回调自己写的那个函数，并传入参数
- 缺点：需要服务器配合，返回一个js,并且有回调的相关代码

cors

- 服务器的响应头，有标识，标识允许哪些网站可以请求这个服务器

// 允许哪些域名请求我
res.setHeader('Access-Control-Allow-Origin', '*')
// 允许哪些请求方式
res.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
// 允许携带哪些额外的请求头信息
res.setHeader("Access-Control-Allow-Headers", "X-Requested-With,X_Requested_With,Content-Type")

proxy

代理的方式，通过服务器去请求某个网站的数据，服务器拿到数据之后，再把结果返回给浏览器