vue-cli3设置代理跨域详解
vue-cli3设置代理跨域详解
// 在根⽬录下⾃⾏创建fig.js
// cli3 代理是从指定的target后⾯开始匹配的，不是任意位置；配置pathRewrite可以做替换
devServer: {
port: '8080',
open: true,
proxy: {
'/api':{
// /api 的意义在于，声明axios中url已/api开头的请求都适⽤于该规则，
// 注意是以/api开头，即：axios.post({url: '/api/xxx/xxx'})
target: '服务器真实地址',
// 此处target的意义在于：造成跨域是因为访
// 问的host与我们的请求头⾥的origin不⼀致，所以我们要设置成⼀致，这个具体请看下⽂
changeOrigin: true,
pathRewrite: {'^/api':'我是服务器/api'}
// 此处是⼤部分⽂章都不会明说的的地⽅，
// 既然我们设置了代理，则所有请求url都已写成/api/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢
// 因此这⾥的意义在于，以 /api开头的url请求，代理都会知道实际上应该请求那⾥，
// ‘我是服务器/api’，后⾯的/api根据实际请求地址决定，即我的请求url：/api/test/test，被代理后请求的则是
// 我是服务器/api/test/test
}
}
如何设置代理服务器
}
}
⼀个已经代理成功的请求
如图，可以看到Request URL中的host 和 请求头中的 origin已经⼀致了，这就是为什么配置代理可以解决跨域的问题，
造成跨域是因为request url的host与我们的origin不⼀致，也就是常说的，⾮同源，通过配置代理，我的请求变成了从
192.168.1.109:8080(这是我本地的ip，解释⼀下)向192.168.1.109:8080请求数据，则解决了⾮同源的问题，
⼈话模式
⼈话：代理服务器代替我们请求了服务器的数据返回给了我本机，我本机向我本机请求代理替我拿到的数据，因此我不再需要考虑跨域了
devServer: {
proxy: {
'/api': {
target: 'localhost:8001', //⽬标地址--api路径
ws: true,  是否启⽤websockets
changeOrigin: true, //开启代理：在本地会创建⼀个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进⾏数据的交互就不会有跨域问题
pathRewrite: { '^/api': 'localhost:8080/api' } //这⾥重写路径--vue端⼝
}
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。