背景

在做steampy市場(https://steampy.com), 在實現(xiàn)前端應用和后端 API 服務器沒有運行在同一個主機上，需要在開發(fā)環(huán)境下將 API 請求代理到 API 服務器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。

問題

Access to XMLHttpRequest at 'http://steampy.com/log'(redirected from 'http://127.
0.0.1:9999/getTrad') from origin 'http://127.0.0.1:8080'has been blocked by
 CORS policy: Response to preflight request doesn't pass access control 
check: Redirect is not allowed for a preflight request.

分析問題

通常vue.config.js 配置普通代理方式

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '',   //要訪問的跨域的域名
        ws: true,  // 是否啟用websockets
        changeOrigin: true //開啟代理：在本地會創(chuàng)建一個虛擬服務端，然后發(fā)送請求的數(shù)據(jù)，并同時接收請求的數(shù)據(jù)，這樣客戶端端和服務端進行數(shù)據(jù)的交互就不會有跨域問題
      },
      '/foo': {
        target: ''
      }
    }
  }
}

解決方法

module.exports = {
    devServer: {
        host: '0.0.0.0',
        port: 8080,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            '/api': {
                target: 'https://steampy.com/',
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/api': '' // 思路是如果是開發(fā)環(huán)境，就給所有要代理的接口統(tǒng)一加上前綴，然后代理請求時再統(tǒng)一通過rewrite去掉
                }
            },
            '/foo': {
                target: '<other_url>'
            }
        }
    }
}

注意

1. 一般大家在proxy 中配置了 target,ws,changeOrigin等，我這里添加了（ pathRewrite: {'^/api': '' }）才解決問題
2. pathRewrite: { '^/api': '' } , 如果是開發(fā)環(huán)境，就給所有要代理的接口統(tǒng)一加上前綴，然后代理請求時再統(tǒng) 一通過rewrite去掉, 如果是生成環(huán)境下，就可以不用添加了.
3. 同時檢查服務器端是否配置了，跨域解決代碼. 需要前后端配合解決。
   （大家一般出現(xiàn)問題都是第三部，服務器端不支持，你是如何都無法通過請求的，一定知悉.）