使用 React 在 Front 调用 API 时出错

Question

当我尝试单击按钮进行订阅时显示错误。这是浏览器控制台中的错误消息：

从源“http://localhost:3000”获取“https://api.exhia.com/api/accounts/addaccount”的访问权限已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

这是处理点击的代码示例：

 handleFormSubmit(event) {
    event.preventDefault();
    this.setState({ msg: 'checked' });
    const validation = this.validator.validate(this.state);
    this.setState({ validation });
    this.submitted = true;
    if (
      this.state.checked === true &&
      validation.subConfirm_pwd.isInvalid === false
    ) {
      fetch(`${API}/api/accounts/addaccount`, {
        method: 'POST', // 'GET', 'PUT', 'DELETE'
        body: JSON.stringify({
          email: this.state.sub_mail,
          password: this.state.sub_pwd,
          acceptCGU: this.state.checked,
        }),
        headers: {
          'Content-Type': 'application/json;charset=utf-8',
          Accept: 'application/json',
        },
      })
        .then(res => res.json())

.....

我正在努力解决这个问题，这是我的 webpack.config：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        publicPath: '/',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.join(__dirname, './build'),
        compress: true,
        port: 3000,
        historyApiFallback: true,
    },
    performance: {
        hints: false,
        maxEntrypointSize: 512000,
        maxAssetSize: 512000
    },
    module: {
      rules: [
        {
          test: /\.(css|sass|scss)$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                importLoaders: 2
              },
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
              },
            },
          ],
        },
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: ["file-loader"]
        },
        {
            test: /\.(woff(2)?|ttf|otf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '[name].[ext]',
                  outputPath: 'fonts/'
                }
              }
            ]
        }
      ]
    },
     //remove comments from JS files
    optimization: {
        minimizer: [
        new UglifyJsPlugin({
            uglifyOptions: {
            output: {
                comments: false,
            },
            },
        }),
        new OptimizeCSSAssetsPlugin({
            cssProcessorPluginOptions: {
            preset: ['default', { discardComments: { removeAll: true } }],
            }
        })
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css"
        }),
        new ManifestPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: path.resolve('./public/index.html'),
        }),
    ]
};

我不确定错误来自哪里。我该如何解决？

Answer 1

http://localhost:3000 已被 CORS 策略阻止，因此您只需将 HTTP 标头添加到为您的 API 提供服务的服务器即可。这意味着更改 API。

在您的情况下，这是 (fatboar.extia.com) 或 (api.exhia.com) - 我不知道是哪一个，因为您似乎在您的问题/cmets 中可以互换使用它们。

此站点提供了有关如何执行此操作的详细信息：https://enable-cors.org/server.html - 如果您需要进一步的指导，我将研究如何为您的特定平台添加标题。您应该能够在 Postman (https://www.getpostman.com/) 之类的工具中看到返回的标头 - 我将首先探索 API 以检查标头，然后在浏览器中继续执行您的代码。

1) Access-Control-Allow-Origin: http://localhost:3000

注意。当您转移到生产环境时，您可能需要更改上述内容以匹配进行调用的服务器。因此，例如，当您在本地主机上托管应用程序时本地：3000。假设您在 blah.com 上托管，则当您转移到生产环境时，您的访问控制标头也需要更改。

2) Access-Control-Allow-Origin: http://blah.com

不要被暗示通配符的答案所诱惑，例如

3) Access-Control-Allow-Origin: * 

这将允许任何授权人员从任何域访问 API，这可能不是您想要的。因此，任何站点都可以代表其访问者向您的站点发出请求并处理其响应。

Answer 2

这是因为您正在尝试调用在不同服务器上运行的服务。

More on cors issue

如果是开发环境，你应该使用某种代理，例如 webpack Dev server proxy

另一种选择是通过某种插件禁用浏览器中的cors签入，在chrome应用商店中简单搜索会给你很多插件。