60

我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 中，我使用requestfromsuperagent来生成 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

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

4

5 回答 5

82

另一种解决方法是将所需的 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"
  }
}

文档链接

于 2017-06-25T16:38:58.647 回答
44

使用 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/*tohttp://0.0.0.0:8080/*并解决 CORS

于 2016-09-09T15:00:17.307 回答
10

您正在运行您的 JavaScript，localhost:5050但您的 API 服务器是localhost:8000. 这违反了同源策略，因此浏览器不允许这样做。

您可以修改您的 API 服务器以启用 CORS，或者按照webpack-dev-server 页面上“与现有服务器结合”下的说明将资产服务与 webpack-dev-server 和您自己的 API 服务器结合起来。

于 2015-07-24T20:51:05.687 回答
10

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

devServer: {
    https: true,
    headers: {
        "Access-Control-Allow-Origin": "*",
    },
    // ....
}
于 2019-07-18T09:53:53.427 回答
4

有两种解决方案。第一个是在客户端设置代理，第二个是在服务器上设置 CORS。CORS 是服务器问题，服务器不允许来自不同来源的访问。即使使用不同的端口也被认为是不同的来源

第一个解决方案

在您的后端代码中，您必须设置此标头：这是 express node.js 中的示例

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "OPTIONS, GET, POST, PUT, PATCH, DELETE"
  );
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});

第二种解决方案：

在 webpack config.js 中，如果你想传递任何变量，我们导出

module.exports=function(env){
return {}}

代替

module.exports={}

我们env通过脚本注入它。

"dev-server": "webpack-dev-server --env.api='https://jsonplaceholder.typicode.com/users'",

现在 webpack 可以访问这个环境了。在 webpack.config.js 中

module.exports = function ({
  api = "https://jsonplaceholder.typicode.com/users",
}) {
  return {
    entry: { main: "./src/index.js" },
    output: {
      path: path.resolve(__dirname, "public"),
      filename: "[name]-bundle.js",
      publicPath: "/",
    },
    mode: "development",
    module: {
      rules: [
        {
          loader: "babel-loader",
          test: /\.js$/,
          exclude: [/node_modules/],
        },
        
        {
          // Load other files, images etc
          test: /\.(png|j?g|gif|ico)?$/,
          use: "url-loader",
        },
        {
          test: /\.s?css$/,
          use: ["style-loader", "css-loader", "sass-loader"],
        },
      ],
    },
    //Some JavaScript bundlers may wrap the application code with eval statements in development.
    //If you use Webpack, using the cheap-module-source-map setting in development to avoid this problem
    devtool: "cheap-module-eval-source-map",
    devServer: {
      contentBase: path.join(__dirname, "public"),
      historyApiFallback: true,
      proxy: {
        "/api": {
          changeOrigin: true,
          cookieDomainRewrite: "localhost",
          target: api,
          onProxyReq: (proxyReq) => {
            if (proxyReq.getHeader("origin")) {
              proxyReq.setHeader("origin", api);
            }
          },
        },
      },
    },
    
  };
};
于 2020-06-03T18:27:24.473 回答