手摸手叫你用Proxy处理跨域

首先，跨域问题应该是前后端分离开发时候都会遇到的，上周，新加入的小伙伴还不熟悉，所以干脆就写一下。自己也复习下。

1、什么是跨域

Access to XMLHttpRequest at 'https://XXX.com' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

当你发现请求不通，然后打开控制台发现这句话，那么，嗯，跨域了

2、为什么会跨域

跨域，顾名思义，就是跨域了他本来的区域
如上面的描述所说，你是个http://localhost:8080的网址，但是你却在请求https://XXX.com
浏览器阻止了这个请求，告诉你，不行
至于为什么不行，是因为浏览器有同源策略
所以：
知识点1、只有浏览器有跨域问题
知识点2、这个请求实际很大程度没发出去，所以后端实际什么都没收到

3、怎么处理跨域

处理的方法很多，这个这里不详细展开（这是个经典面试题）
其中之一就是使用Proxy

4、Proxy说明

Proxy中间件，实际上起了个代理的作用，你可以理解为，你发出请求，被Proxy拦截了，他再把你的请求按照你的配置，转发到真正的地址上去，然后返回之后，他再把结果返回给你
本质上，是在本地起了一个node服务去做请求的转发代理

所以：
知识点：开发环境才使用Proxy（这句话其实表述的不对，什么环境，都可以使用Proxy，但是实际工作生产中，基本上也只有开发环境会出现跨域，因为你和后端ip不一样）

5、怎么使用Proxy

目前，基本上使用的都是http-proxy-middleware这个中间件
新版的vue-cli配置
找到vue.config.js文件(没找到新建一个，和package.json同层级)

// vue.config.js
module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}
 

完成配置请重启服务， 不然不会生效
这下，我们所有的请求（不包括请求图片之类的），都会被实际请求到localhost:4000上
对于早些版本，则在
config/index.js中
`dev: {

assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
  '/api': {
    target: "http://localhost:4000",
    changeOrigin: true,
   }
},`

这下，我们访问/api,实际在访问http://localhost:4000
另外，其他常用的参数还有ws，pathRewrite
ws则表示对websocket的转发
pathRewrite则表示是否对路径重新更改

下面举个栗子

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000',
        ws: true, // 对websocket也代理
        changeOrigin: true，
        pathRewrite: {
            '^/api/old-path': '/api/new-path', // 这个会把/api/old-path,
            // 实际换成http://localhost:4000/api/new-path
            // （应该很少用到，一般都是一致的）
        }
      }
    }
  }
}

最后的知识点：
记得项目重启才能看见效果
这个时候，大家打开控制台一看，欸，没变啊，链接还是原来的，没有变成代理之后的。
答:这个中间件，你可以这么理解，他是在控制台说看见的请求发出去之后代理转发的，所以，成功控制台链接也不会变化。