本地环境 vue 使用 Axios 请求地址,出现跨域,使用 vue.config 代理解决
错误信息:has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.接口url: /api/customer
错误信息:
has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
接口url: /api/customer/login/Login
Axios 设置的请求IP: axios.defaults.baseURL = ‘http://10.10.10.1:9999’;
这时请求的完整地址为: http://10.10.10.1:9999/api/customer/login/Login
因为 本机地址 和 请求地址 不在 同一IP端口 下,可以使用 vue.config 里的代理来设置请求地址,避免跨域:
module.exports = {
devServer: {
open: true,
host: '10.10.10.2', // 本机IP
port: 8080,
https: false,
hotOnly: true,
proxy: {
'/api': {
target: 'http://10.10.10.1:1111',
},
'/gaode': { // 请求第三方接口跨域也可以这样解决
target: 'https://restapi.amap.com',
changeOrigin: true,
pathRewrite: {
'^/gaode': ''
}
}
}
}
}
这时请求的完整地址明文为: http://10.10.10.2:8080/api/customer/login/Login
但实际上访问的还是: http://10.10.10.1:9999/api/customer/login/Login
因为网页IP与请求地址明文一致,从而避免了跨域
更多推荐
所有评论(0)