proxy反向代理

跨域：跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，基于同源策略的保护，请求不到数据

同源策略：同协议，同端口，同域名

如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击

跨域解决方案：jsonp , cors (后台) ,反向代理

 

vue反向代理

module.exports = {
  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      "/api": {
          "target":"http://122.15.55.78:5080",
          "changeOrigin":true,
          "pathRewrite": {
              "^/api":""
           }
     }
},    

 

访问时，含有api的后端访问路径，会被拼接为

http://122.15.55.78:5080/api

pathRewrite进行访问路径重写，之后访问

http://122.15.55.78:5080/api 会被转换为  http://122.15.55.78:5080/


原理

proxy反向代理实质是将本地请求通过本地服务或者名下服务发送到目标服务上去：

vue反向代理实际上是在本地开了一个node服务，将请求发送到本地node服务上，再通过node服务转发出去，发送到目标服务。由于是本地开启node服务，反向代理只能
在开发模式下进行使用。

node服务：
当配置了反向代理时，本地node环境会开启反向代理服务，引用了http-proxy-middleware插件，将前端访问路径替换为配置文件中target下的访问路径