跨域是在开发中经常遇到的问题,那什么是跨域呢?及常见跨域的处理方案有哪些呢?
跨域指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制,防止他人恶意攻击网站。
所谓跨域问题其实就是浏览器的同源策略所导致的。
同源策略:是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。
— 来源 MDN
当我在访问http://localhost:3000/users是被 CORS(同源策略)blocked了,这就是典型的跨域问题
什么情况出现跨域问题
- 访问缓存
- 页面通信
- 访问接口
JSONP
- 原理:动态创建一个script 标签。利用script 标签的 src 属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。
- 注意:JSONP仅支持 GET 方法,兼容性比CORS好
CORS 全称:跨域资源共享
- CORS 是一个W3C 标准,它允许浏览器向不同源的服务器,发出XMLHttpRequwst 请求。
- 原理:服务器设置 Access-Control-Allow-OriginHTTP 响应头之后,浏览器将会允许跨域请求 。
反向代理
- 前端使用反向代理解决跨域,在vue框架中的vue.config.js文件 使用反向代理来解决跨域问题。
Node 正向代理
window+iframe
简单请求的 CORS 行为
- 请求方式:HEAD、POST、GET
- http 头信息不超出以下字段
Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width
Content-Type (限制3值:application / x-www-form-urlencoded、 multipart / form-data、 text / plain)
在头信息中,增加一个Origin 字段:Origin:http://xxx.com
复杂请求的 CORS 行为
- PUT、DELETE或者Content-Type的字段类型是:application/json 等
- 非简单请求的CORS,会在正式通信之前,增加一次HTTP查询请求,称为“预检”请求(preflight)。
- “预检”请求方法是 OPTIONS。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
"/webapi": {
target: "http://localhost:3000/",
changeOrigin: true,
}
}
}
})
<script type="text/javascript">
//Callback是存在服务端的,callback内是读取数据的逻辑
window.jsonpCallback = function(data) {
console.log(data);
};
</script>
//引入服务端代码
<script src="http://localhost:8080/api/jsonp?msg=hello&cb=jsonpCallback" type="text/javascript" charset="utf-8">
</script>
- 介绍了跨域问题其实就是浏览器的同源策略所导致的;
- 当我们在访问缓存,页面通信,访问接口是容易出现跨域问题;
- 这里介绍了JSONP、CORS、反向代理等方法来解决跨域问题。