vue项目配置代理解决跨域问题

 前端向服务器发送请求时，经常会遇到跨域问题，那么什么是前端跨域呢？在vue项目中如何利用代理解决呢？

1. 这里以axios发请求为例

axios发送的请求是本地的服务器地址拼接上发送的请求，如 http://localhost:8080/abc/def

2. 如果发送的请求都以 /abc 开头，那么我们就可以在proxy中进行服务器代理配置。

"/abc":{} : 引号中代表监测的是以 /abc 开头的接口
target : 代表监测到以 /abc 开头的接口后，把axios请求中前面的本地服务器地址改为后端接口地址，实际发送给后端的请求就是下方后一个请求
        http://localhost:8080/abc/def --> http://XX.XX.XX.XX:8081/abc/def

changeOrigin : 是否跨域
ws : 如果要代理 websockets，配置这个参数
secure : 如果是https接口，需要配置这个参数（如果是http接口，也可以不写这个参数）
pathRewrite ：替换请求中匹配的内容。在3的方法2中详细解释用法，上方未使用此参数

3. 代理多个接口

http://localhost:8080/zzz/one

http://localhost:8080/xxx/two

方法1：监测多个接口，可以在proxy中写多个配置：（适用于target不同的代理，相同也可以用这个方法，就是会麻烦一点，对于相同的target方法2会比较方便）

那么实际发送给后端的请求就是：

http://XX.XX.XX.XX:8082/zzz/one

http://XX.XX.XX.XX:8083/xxx/two

• 方法2：使用axios进行前设置（适用于target相同的代理）

• 进行了上方的配置后，在本地发送的请求会变为

  http://localhost:8080/api/zzz/one

  http://localhost:8080/api/xxx/two

  而后可以设置只监听 "/api" 的代理，不过要设置pathRewrite参数：

• pathRewrite ：检查代理的请求中是否有 /api ，有的话把 /api 替换为冒号后面的内容，案例为替换成空字符串，也就是删去 /api 。（^是正则表达式的内容，意思是限定开头）
  本地请求 http://localhost:8080/api/zzz/one -> 

  代理后请求 http://XX.XX.XX.XX:8084/api/zzz/one ->

  设置pathRewrite后的请求 http://XX.XX.XX.XX:8084/zzz/one

  所以代理完成后真正发送给后端的请求就是 http://XX.XX.XX.XX:8084/zzz/one 啦。

• 1.统一给请求添加/api方便监测代理 2.统一删去/api发送正确的请求）

• 注意：小伙伴们可能会看到浏览器中右键检查打开的控制台中，网络->标头->常规，中的请求网址显示的还是 http://XX.XX.XX.XX:8084/api/zzz/one 。这是因为浏览器的同源策略，经过代理设置的请求发送给后端已经变成 http://XX.XX.XX.XX:8084/zzz/one 没有/api 的形式了，不用被浏览器显示的请求网址干扰。如果实在不想看到浏览器的请求网址中有api，可以采用方法1。
   

什么是跨域？

 JavaScript同源策略：当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。**同源策略限制：**表单提交、AJAX请求等。
    注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

proxy代理解决跨域

    **原理：**浏览器是禁止跨域的，但是服务端不禁止，在本地运行npm run serve等命令时实际上是用node运行了一个服务器，因此proxyTable实际上是将请求发给自己的服务器，再由服务器转发给后台服务器，做了一层代理，因此不会出现跨域问题。

当我们在用本机去找服务器要数据时会产生跨域问题，所以利用vue-cli去开启一个代理服务器。

配置（vue.config.js）

• 方法一

  • 优点：配置简单、请求资源时直接发给前端（8080）即可
  • 缺点：不能配置多个代理，不能灵活的控制请求是否走代理
  • 当请求了前端不存在的资源时，该请求会转发给服务器(优先匹配前端资源)

• 方法二

  • 优点：可以配置多个代理，且可以灵活的控制请求是否走请求
  • 缺点：配置繁琐，请求资源时必须加前缀

  • 请求时：

    请求前缀必须跟着端口号

 1.vue-cli 2 是在路径为config/index.js的文件下proxyTable里配置的，该文件是整个项目的主要配置入口

注意： ‘/api’ 为匹配项，因为在 ajax 的 url 中加了前缀 ‘/api’，而原本的接口是没有这个前缀的，所以需要通过 pathRewrite 来重写地址，将前缀 ‘/api’ 转为 ‘/’。如果本身的接口地址就有 ‘/api’ 这种通用前缀，就可以把 pathRewrite 删掉。

2.vue-cli 3 是自己在根目录下新建vue.config.js文件，在devServer.proxy对象里配置（当然也有其他方式），配置后会和隐藏的配置自动进行整合