请求的资源上不存在 'Access-Control-Allow-Origin' header。因此不允许来源 'http://localhost:8080' 访问

Question

我正在从 React JS 调用 Drupal API 并收到以下错误：

Failed to load http://l-and-d.dd:8083/node?_format=json: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

我已经允许我的 Drupal 服务器上的所有请求，但我仍然收到此错误。我认为错误在客户端。我还在 webpack.config.js 文件中添加了 headers 这里是webpack.config.js文件

const path = require('path')
module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/
        }, {
        test: /\.scss$/,
        use: [
            'style-loader',
            'css-loader',
            'sass-loader'
        ]
        },
       {
            test: /\.(eot|svg|woff|woff2|ttf|png|svg|jpg|jpeg|bmp|gif|pdf)$/,
            use: [
                'file-loader'
            ]}
        ]
    },
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        historyApiFallback: true,
        headers: {
            'Access-Control-Allow-Origin' : '*'

        }
    }
}

我也试过在我的代码中添加自定义 headers 但那也没用，这是 API 调用代码：

axios({
    method: 'POST',
    url: 'http://l-and-d.dd:8083/node?_format=json',
    data: node,
    headers: {'Access-Control-Allow-Headers': '*',
            'Access-Control-Allow-Origin': '*',
             'Access-Control-Expose-Headers':'*',
            'Content-Type':'application/json',
            'Accept':'application/json',
            'X-Custom-Header': '*' }
}).then((res) => {
    console.log(res)
}).catch((err) => {
    console.log(err)
})

Answer 1

这是因为你的文件在不同的端口，而你的 reactjs 在不同的端口运行一旦应用程序部署在相同的环境中，或者如果你现在需要修复它，这个问题将自动解决您可以在浏览器中添加此扩展程序 link

Answer 2

尝试为 drupal 安装 CORS 模块并将 cors 模块中的值设置为“*”。 https://www.drupal.org/project/cors

请求的资源上不存在 'Access-Control-Allow-Origin' header。因此不允许来源 'http://localhost:8080' 访问

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access

cors

drupal-8

reactjs

webpack-dev-server