vue-cli3配置proxy解决前后端域名/端口不一致引起的跨域问题
错误代码前端import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)this.axios.post('http://localhost:8082/account/signup', this.formValidate)后端@RestController@Reques...
错误代码
前端
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
this.axios.post('http://localhost:8082/account/signup', this.formValidate)
后端
@RestController
@RequestMapping("/account")
public class AccountController {
@PostMapping(value = "/signup")
@ResponseBody
public JSONObject signup(@RequestBody User user)
{
JSONObject object = new JSONObject();
object.put("type","success");
object.put("message","注册成功");
return object;
}
}
报错
xhr.js?13a7:172 OPTIONS http://localhost:8082/account/signup 400
Access to XMLHttpRequest at 'http://localhost:8082/account/signup' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
原因:前端是8080端口,后端是8082端口,引发了跨域问题
解决方法
由于本人用的是vue-cli4.x(高于vue-cli3.0),因此要在项目根目录下新建一个vue.config.js文件,@vue/cli-service
会自动加载这个文件。关键代码如下:
module.exports = {
// All options for webpack-dev-server are supported
// https://webpack.js.org/configuration/dev-server/
devServer: {
// https://github.com/chimurai/http-proxy-middleware#proxycontext-config
// axios跨域代理配置表,在这里可以配置特定的请求代理到对应的API接口
proxy: {
// 代理所有的以'/api'开头的浏览器请求
'/api': {
// 服务端域名和端口
target: 'http://localhost:8082',
// 如果设置成true:请求头中host会设置成target
changeOrigin: true,
// 用'/'替换浏览器请求url中的'/api',例如浏览器请求为http://localhost:8082/api/xxx,
// 则对应的服务端接口为http://localhost:8082/xxx
pathRewrite: {
'^/api': '/'
}
}
}
}
}
并且,前端axios发送请求的url是不写域名的,所以,前端代码改为
this.axios.post('/api/account/signup', this.formValidate)
参考文章:
https://cli.vuejs.org/zh/config/#devserver-proxy
https://github.com/chimurai/http-proxy-middleware#proxycontext-config
https://github.com/chimurai/http-proxy-middleware#context-matching
更多推荐
所有评论(0)