[JavaScript知识库]proxy - vue 中的跨域解决方案

目标:解决跨域问题.

为什么会出现跨域？

跨域原因：同源(协议,端口,域名)问题

解决方案：服务器请求服务器是没有问题的

当下,最流行的就是前后分离项目,也就是前端项目和后端接口并不在一个域名之下，那么前端项目访问后端接口必然存在跨域的行为.

跨越的特点：

• 跨域本质是浏览器的行为

  • 因为浏览器中有一个安全策略：不同源的网站之间是不能够相互请求的，如果相互请求了，就算得到了数据，浏览器也会拒绝这些数据

• 在服务器之间，其实是不存在跨域的情况的

怎么解决这种跨域 ？

开发环境的跨域，也就是在vue-cli脚手架环境下开发启动服务时，我们访问接口所遇到的跨域问题，vue-cli为我们在本地开启了一个服务,可以通过这个服务帮我们代理请求,解决跨域问题

这就是vue-cli配置webpack的反向代理

采用vue-cli的代理配置

vue-cli的配置文件即vue.config.js,这里有我们需要的 代理选项

module.exports = {
  devServer: {
   // 代理配置
    proxy: {
        // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
        // localhost:8888/api/abc  => 代理给另一个服务器
        // 本地的前端  =》 本地的后端  =》 代理我们向另一个服务器发请求 （行得通）
        // 本地的前端  =》 另外一个服务器发请求 （跨域 行不通）
        '/api': {
        target: 'www.baidu.com', // 我们要代理的地址
        changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
         // 路径重写
        pathRewrite: {
            // 重新路由  localhost:8888/api/login  => www.baidu.com/api/login
            '^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 
        }
      },
    }
  }
}

注意点：由于 proxy 配置修改了 vue.config.js 文件，如果需要代码起作用，需要重新启动服务

总结：

• proxy 解决跨域

  • 1.0 将后端服务器的请求伪装为前端服务器的请求：

    • 将请求路径： http://localhost:3000/api/sys/login 替换为 http://localhost:9528/xxx/sys/login

  • 2.0 跟前端服务器约定路径的转换

// vue.config.js
devServer: {
	proxy: {
		'/xxx': {
			target: 'http://localhost:3000/api',
			pathRewrite: {
				'^/xxx': ''
			}
		}
	}
}