Reactjs 使用React在前面调用API时出错

我尝试单击按钮订阅时出现了一个错误。这是浏览器控制台中的错误消息：

CORS策略已阻止在“”处从源“”获取的访问：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许源”标头。如果不透明响应满足您的需要，请将请求的模式设置为“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())

.....

我正在使用prod来处理此问题，这是我的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'),
        }),
    ]
};

---

我不知道这个虫子是从哪里来的。如何修复它？

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

如果是针对开发环境，您应该使用某种代理，例如WebpackDevServer

另一个选项是通过某种插件禁用cors签入浏览器，在chrome app store中进行简单搜索将为您提供许多插件。

已被cors策略阻止，因此您只需向为您的API提供服务的服务器添加HTTP头。这意味着改变API

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

本网站提供了如何做到这一点的详细信息：-如果您需要进一步的指导，我将研究如何为您的特定平台添加标题。您应该能够在类似Postman（）的工具中看到返回的标题-我将首先使用该工具浏览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，这可能不是您想要的。因此，任何网站都可以代表其访问者向您的网站提出请求，并处理其响应

可能重复：-基本上您正在执行跨域请求，因此如果远程服务器在您的控制下，您必须代理或更改远程服务器。您好，Squiggs，谢谢您的回答。请问我怎样才能用代理做这件事？因为我是服务器的管理员，但我不知道如何更改remote，正如您所说的，对于站点B希望访问站点A的每个资源/页面，站点B应该为其页面提供响应标题：Access Control Allow Origin:因此，在您的情况下，在开发过程中，您需要一个允许本地主机的头。您所说的siteA和siteB是什么意思？我只有一个站点：fatboar.extia.com:/n您不能将该代码放在客户端或代码中的任何位置。它必须存在于与之交谈的API中的服务器端。您提到您是“服务器管理员”——我假设这意味着您可以访问API的源代码。换句话说：需要更换Hello Squiggs，谢谢你的回答。它是在prod上而不是dev上，请查看上面编辑中的webpack.config。您说我需要禁用cors签入浏览器，但每个人都不会这样做：/禁用cors和代理是我们在开发环境中通常会做的事情。在生产环境中，API服务器应该允许主机配置，或者所有应用程序都应该托管在同一个域中，我建议请参阅cors文档这里是一个很好的解释hey Nirjhar，它并没有真正帮助我解决我的问题，不幸的是，它只是解释了交叉的概念。。