什么是跨域问题
当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域。
跨域是是因为浏览器的同源策略限制,是浏览器的一种安全机制,服务端之间是不存在跨域的。
我在写实验室项目的时候,后端给我提供的接口并没有挂载到服务器上,他用的是8001端口,但是我vue项目设置的端口是8081这也就出现了跨域问题
解决方法
1.在vue项目根目录下找到vue.config.js文件(如果没有该文件则自己创建),在proxy中设置跨域,在proxy中设置要访问的地址,并重写/api为空的字符串。下面是我vue.config.js中的代码
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// const { defineConfig } = require('@vue/cli-service')
//在vue中使用proxy进行跨域的原理是:
//将域名发送给本地的服务器(启动vue项目的服务,loclahost:8080),
//再由本地的服务器去请求真正的服务器。
devServer:{
proxy:{
'/api':{//表示拦截以/api开头的请求路径
target:'http://localhost:8001',
changOrigin: true,//是否开启跨域
pathRewrite:{
'^/api':'' //重写api,把api变成空字符,因为我们真正请求的路径是没有api的
}
}
}
}
})
2、在axios.create的时候将baseURL设置为api
//设置请求根路径
axios.defaults.baseURL = '/api'
现在调用后端接口发现可以成功调用了,解决