浏览器的同源策略(跨域问题)有了解过吗?

如果一个请求url的 协议、域名、端口三者之间任意一个与当前页面url不同就会产生跨域的现象。同源策略,是一种网页的安全协议。同源:同协议,同域名,同端口。http;// www. aaa.com:8080/index/vue.js ,协议子域名 主域名 端口号资源。同源策略是浏览器的核心,如果没有这个策略就会遭受网络攻击。主要指的就是协议+域名+端口号三者一致,若其中一个不一样则不是同源,会产生跨域。三个允许跨域加载资源的标签: img、 link、 script 跨域是可以发送请求,后端也会正常返回结果,只不过这个结果被浏览器拦截了!

vue-cli代理跨域:在 vue.config.js文件的devServer对象的 proxy中配置。

module.exports={ pages:{ index:{ //入口 entry:’src/main.js’, }, }, lintOnSave:false,//关闭语法检查 //开启代理服务器 方法一 // devServer:{ //paroxy:’http://localhost:5000′,//5000服务器端口号, // }, //方法二: devServer:{ proxy:{ // 请求前缀/api,只有加了/api前缀的请求才会走代理(前端自定义) ‘/api’:{ target:’http://localhost:5000′, pathReweite:{‘^/api’:”},//重写 //ws:true,//用于支持websocket changeOrigin:true,//用于控制请求头中的host值,默认true,react中默认false } } }}

在使用webpack或者vite构建工具时候,配置反向代理,把本地所有的axios请求的地址,(域名:端口)改成:/api/,本地发起请求的地址 /api/ 都会被自动替换成实际后端请求地址;这样就实现了当前请求的地址,就会被后端接收识别为和前端都一样的域名;保证了前后端域名一致,解决了跨域;2. nginx里面也可以使用同样的方式,通过反向代理转发,来解决跨域问题。3. JSONP解决跨域。需要前后端一起配合,利用同源策略对script标签不受限制,不过只支持get请求。4. CORS跨域资源共享。cors跨域,只需要后端配置,服务端设置header(“Access-Control-Allow-Origin:*”);允许任何来源,header(“Access-Control-Allow-Origin:http://me.com”);只允许来自域名http://me.com的请求。

发表评论