Access to XMLHttpRequest at 'http://xxx' from origin 'http://xxx'has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
出现这个问题是axios的跨域问题。
既然不能直接访问,那么我们就可以设置代理。服务器之间请求数据,是没有跨域的。就可以配置一个代理服务器请求另一个服务器中的数据,然后把请求出来的数据返回到代理服务器中,代理服务器再返回数据给客户端,这样就可以实现跨域访问数据了。
具体内容如下:
用vue-cli3创建的项目没有vue.config.js文件,需要手动创建。
在根目录下,创建效果如图:
在vue.config.js里面添加proxy来设置代理
module.exports = {
devServer: {
open: false,
port: 8080,
// 代理
proxy: {
'/': {
target: 'http://localhost:8082',
changeOrigin: true
}
}
}
}
然后在main.js中添加ÿ