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文件中添加了标题这是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' : '*'

        }
    }
}

我也尝试过在代码中添加自定义标头，但这也行不通，这是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”标头。因此，不允许访问来源“ http：// localhost：8080”

2 个答案: