前端使用proxy解决跨域问题

proxy基本原理就是接收客户端发送的请求后，再转发给其他服务器代替浏览器去请求，以解决浏览器安全策略限制。

devServer 的意思其实就是通过 webpack 帮你在本地起一个 node 服务器。

基本配置项

module.exports = {
  devServer: {
    proxy: {
      '/proxy-api': {
        target: 'http://dnny.net', // 代理地址(接口域名)
        changeOrigin: true,  		  // 是否跨域
      }
    }
  }
}

假如需要请求的接口url是'http://dnny.net/proxy-api/info'，代理配置成功后，可以在浏览器的开发者工具中发现请求的接口url却是http://localhost:8080/proxy-api/info,但实际的请求是http://dnny.net/proxy-api/info。

因为会做以下转发：

http://localhost:8080/proxy-api/info => http://dnny.net/proxy-api/info

关于pathRewrite配置项

1.假设后端提供的每个接口中，域名之后的地址都以固定字符串开头，例如：'/proxy-api/login'、'/proxy-api/user'、'/proxy-api/info'，则无需配置pathRewrite，此时的'/proxy-api'就相当于是一个标识。

2.若不是以固定字符串开头，例如：'/login'、'/user'、'/info'，则需前端进行处理，给接口加上一个标识符。假如设置标识符为“proxy-api”,则需设置pathRewrite。代码如下：

module.exports = {
  devServer: {
    proxy: {
      '/proxy-api': {
        target: 'http://dnny.net', // 代理地址(接口域名)
        changeOrigin: true,  		  // 是否跨域
        pathRewrite: { '^/proxy-api': '' }, //重写地址
      }
    }
  }
}

假如需要请求的接口url是http://dnny.net/info'，代理配置成功后，可以在浏览器的开发者工具中发现请求的接口url却是http://localhost:8080/proxy-api/info,但实际的请求是http://dnny.net/info

因为会做以下转发：

http://localhost:8080/proxy-api/info => http://dnny.net/proxy-api/info => http://dnny.net/info

其它配置项 

ws: true,                      // 若需代理websockets则配置
secure: true,                // 若是https接口则配置

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://dnn.com', // 接口域名
        changeOrigin: true,  		  // 是否跨域
        pathRewrite: { '^/api': '' }, //若无需重写请求路径则配置，否则可去掉
        ws: true,        			  // 若需代理websockets则配置，否则可去掉
        secure: true,  			  // 若是https接口则配置，否则可去掉
      }
    }
  }
}

注意注意注意：如果配置了proxy，请求路径一定不能设置成全路径，要用标识符替代host域名。

例如需要请求的接口url是"http://dnny.net/info"，前端设置了标识符为"proxy-api" ，则请求路径只用写成"/proxy-api"加"/info"即可。