跨域的由来
跨域是浏览器整出来的,跟代码无关!谨记:当发生跨域问题时,单靠前端一定不能解决!!!
一、跨域的产生
跨域只出现在浏览器!
1.由于浏览器出于安全考虑,如果访问的链接不是同一个源,就会发生跨域。
举个🌰:
比如你跑一个vue项目地址为:http://localhost:8080,
现在你用一个axios请求后端的api地址为:http://192.169.x.xx:9527,那么在浏览器上必然会发生跨域,因为域名不同,端口号不同。
二、解决方案
1.CROS
即后端解决
2.代理Proxy
1.如果是基于vuecli脚手架搭建的工程直接配置devServer:
devServer:{
proxy:{
'/api':{
target:'http://192.168.x.xx:9527',
changeOrigin: true,
pathRewrite: {
['^/api']: ''
}
}
}
}
这样只能在开发阶段可以解决跨域问题,但在生产环境上还需诸如nginx工具来解决跨域的问题
2.如果不依靠后端,nginx这种手段来解决跨域,另外一种手段就是自己搭建一个node中间件
const Koa = require('koa');
const request = require('./axios');
const app = new Koa();
const prot = 7400
app.use(async (ctx, next) => {
console.log("访问");
ctx.set("Access-Control-Allow-Origin", "http://127.0.0.1:5500"); // 指定允许访问的域名
ctx.set("Access-Control-Allow-Methods", "OPTIONS, GET, PUT, POST, DELETE");
await next();
const res = await request.getData("http://192.168.x.xx:9527") // 请求转发到后端
ctx.body = res.data;
})
app.listen(prot, () => {
console.log(`server is running at http://localhost:${prot}`)
})
这种方法直接解决了跨域问题,不过中间件需要前端自己来维护。
3.jsonp
这种方式就是定义一个方法,然后要求服务器返回一段调用定义好的方法,只能解决get请求,作为了解即可
// 定义好一个方法
function getData(data){
console.log(data)
}
window.onload = function(){
// 创建一个script标签
var script = document.createElement('script');
// 设置标签的src属性,指向接口地址
script.src = 'http://localhost:7400'; //假设这个地址返回一段js代码是getData({a:1,b:2})
// 设置标签的type属性,指定返回的数据类型
script.type = 'text/javascript';
script.onload = function(){
// 接口返回数据后,删除这个script标签
script.remove();
}
}
总结
以上就是前端解决跨域的三种办法。