webpack dev服务器CORS问题

Question

我webpack-dev-server v1.10.1用来提升我的Redux项目,我有以下选项:

contentBase: `http://${config.HOST}:${config.PORT}`,
quiet: false,
noInfo: true,
hot: true,
inline: true,
lazy: false,
publicPath: configWebpack.output.publicPath,
headers: {"Access-Control-Allow-Origin": "*"},
stats: {colors: true}

在JS中,我使用requestfrom superagent来生成HTTP GET调用

request
          .get(config.APIHost + apiUrl)
          .set('Accept', 'application/json')
          .withCredentials()
          .end(function (err, res) {
                if (!err && res.body) {
                    disptach(() => {
                        return {
                            type: actionType || GET_DATA,
                            payload: {
                                response: res.body
                            }
                        }
                    });
                }
          });

但是我收到了CORS错误:

XMLHttpRequest cannot load http://localhost:8000/api/getContentByType?category=all. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5050' is therefore not allowed access

有什么建议来解决这个问题吗？非常感谢

Answer 1

使用webpack-dev-server 1.15.X,您可以在配置文件中使用此配置:

devServer: {
   contentBase: DIST_FOLDER,
   port: 8888,
   // Send API requests on localhost to API server get around CORS.
   proxy: {
      '/api': {
         target: {
            host: "0.0.0.0",
            protocol: 'http:',
            port: 8080
         },
         pathRewrite: {
            '^/api': ''
         }
      }
   }
},

有了这个例子中,你会重定向所有的调用http://0.0.0.0:8888/api/*来http://0.0.0.0:8080/*和CORS解决

Answer 2

解决它的另一种方法是直接将所需的CORS头添加到开发服务器:

devServer: {
  ...
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
    "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
  }
}

文档链接

• Webpack开发服务器
• 访问控制允许报头
• 访问控制允许的方法
• 访问控制允许来源

Answer 3

您正在运行JavaScript,localhost:5050但您的API服务器是localhost:8000.这违反了相同的原始策略,因此浏览器不允许它.

您可以修改API服务器以启用CORS,也可以按照"与现有服务器结合"下的webpack-dev-server页面上的说明将资产服务与webpack-dev-server和您自己的API服务器相结合.

Answer 4

有同样的问题，但我的 api 使用的是 https 协议（https://api ....）。必须使用 https 启动服务器并使用 https://localhost:8080

devServer: {
    https: true,
    headers: {
        "Access-Control-Allow-Origin": "*",
    },
    // ....
}