美文网首页
webpack跨域配置proxyTable

webpack跨域配置proxyTable

作者: 追风筝的Hassan | 来源:发表于2020-04-26 14:27 被阅读0次
     '/accountApi': {
            target: '',//目标接口域名
            changeOrigin: true,//是否跨域
            secure: false,
            pathRewrite: {//重写接口
              '^/accountApi': '/'
            },
            onProxyRes: function (proxyRes, req, res) {
              //登录处理
              let cookies = proxyRes.headers['set-cookie']
              var newCookies = []
              if (cookies) {
                cookies.forEach(cookie => {
                  // 连接到 local dev qa 执行下面代码
                  newCookies.push(
                    cookie.replace(/目标域名/, 'localhost')
                  )
                  //连接到 uat prod 执行下面代码
                  // newCookies.push(
                  //   cookie
                  //     .replace(/目标域名/, 'localhost')
                  //     .replace(/Secure; HttpOnly/, '')
                  // )
                })
                proxyRes.headers['set-cookie'] = newCookies
              } else {
                console.log('登录失败=========')
              }
            }
          },
    

    dev-server的proxy有两个事件“onProxyReq”,“onProxyRes”,onProxyReq:可以在请求发送前对请求内容进行更改
    onProxyRes:可以在请求响应后对请求内容进行更改
    项目中遇到跨域问题,再不设置CORS跨域的情况下,开发使用代理解决跨域问题。
    1.先获取验证码,直接加载url的方式获得,返回值中带cookie
    2.登录请求,是异步请求axios,需带上cookie
    问题:
    1.跨域采用代理方式,用proxyTable
    2.登录请求头里加入cookie, axios设置withCredentials: true
    3.cookie作用范围,需配置代理服务器。

    参考文章:https://www.cnblogs.com/strinkbug/p/6073806.html

    相关文章

      网友评论

          本文标题:webpack跨域配置proxyTable

          本文链接:https://www.haomeiwen.com/subject/exwdwhtx.html