0

I'm calling Drupal API from React JS and getting the following error : 

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.

I have already allowed all the requests on my Drupal server and I'm still getting this error. I think the error is on the client side. I have also added the headers on webpack.config.js file Here is webpack.config.js file

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' : '*'

        }
    }
}

I have also tried adding the custom headers in my code but that too didn't work, here is the API calling code :

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)
})
Divyansh
  • 41
  • 5

2 Answers2

2

This is due to your file is in different port and your reactjs is running in different port this issue will automatically be resolved once the application is deployed in the same environment or if u need to fix it now you can add this extension in your browser link

pageNotfoUnd
  • 666
  • 10
  • 20
  • Yes, my Drupal is running on port 8083 and React on 8080. Is there any way to resolve this error at production without adding the extension, is there some way to manipulate the ports? – Divyansh Aug 30 '18 at 06:45
  • ya that's what i told this issue will be resolved automatically in production because in production both will be in same port – pageNotfoUnd Aug 30 '18 at 06:56
  • Sorry, I by mistake wrote production, I mean is there any way to solve this issue in Developement without adding the extension. Thanks – Divyansh Aug 30 '18 at 07:26
  • without extension I am not sure refer https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present – pageNotfoUnd Aug 30 '18 at 07:37
1

Try installing the CORS module for drupal and set the value in the cors module to "*". https://www.drupal.org/project/cors

cbugs
  • 11
  • 1
  • 1