【SpringMVC】前后端分离,跨域问题
Access to XMLHttpRequest at 'http://localhost:8080//Users/login.do' from origin 'http://192.168.56.24:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the r
Access to XMLHttpRequest at 'http://localhost:8080//Users/login.do' from origin 'http://192.168.56.24:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr.js?1a5c:220 POST http://localhost:8080//Users/login.do net::ERR_FAILED 200
dispatchXhrRequest @ xhr.js?1a5c:220
xhrAdapter @ xhr.js?1a5c:16
dispatchRequest @ dispatchRequest.js?4dc9:58
request @ Axios.js?29fb:109
httpMethod @ Axios.js?29fb:144
wrap @ bind.js?4bea:9
login @ login.vue?01f7:74
click @ login.vue?45a9:76
invokeWithErrorHandling @ vue.runtime.esm.js?c320:2988
invoker @ vue.runtime.esm.js?c320:1786
original_1._wrapper @ vue.runtime.esm.js?c320:7405
:8081/#/login:1 Uncaught (in promise) AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
解决办法:(两种使用其中一种即可)
!!在配置完之后记得重新启动项目,否则配置可能不生效
后端:
设置允许跨域访问
response.setHeader("Access-Control-Allow-Origin", "*");//允许所有来源访同
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");//允许访问的方式
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
前端(vue):
设置代理,使用时在目标路径前加上api/就好了
vue.config.js文件里
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 8080, // 端口号
open: false, //配置是否自动启动浏览器
https: false,// https:{type:Boolean}是否启用https
proxy: {
// 代理
"/api": {
target: "http://localhost:8080/", //要代理访问的路径
ws: false,// 是否启用websockets
changeOrigin: true,//开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {
"^/api": ""//这里理解成用'/api'代替target里面的地址,比如我要调用'http://192.168.0.45:8088/user/getuserlist',直接写'/api/user/getuserlist'即可
}
}
}
},
})
更多推荐
所有评论(0)