CODEWITHSUNDEEP
javascriptreactjscorsfetchcross-origin-read-blocking
SaiCharan
SaiCharan

Reputation: 61

React CORS issue with fetch for POST request

I've an api which runs on http://localhost:10080/v1 [I cannot change the code of api]. I've built a react application to send some post data to that api. React app runs on http://localhost:3000

handleSubmit(event){
    event.preventDefault()
    const base_url="http://localhost:10080/v1/"
    const data={<<some json data>>}
    let headers = new Headers();
    headers.append('Content-Type', 'application/json')
    fetch(base_url,{
        method:'POST',
        mode: 'no-cors',
        header:headers,
        body: JSON.stringify(data),

    })

}

When I change mode to cors I'm getting Cross-Origin Request Blocked. When I change mode to no-cors, I'm getting 415-Unsupported Media Type error because when we disable cors then we cannot change request headers(given in other answers and documentation). How to overcome this and send a post request to that api?

Upvotes: 0

Views: 5249

Answers (6)

Moiz
Moiz

Reputation: 11

Run "npm install cors" in your Node application using CMD and then add the following code in index.js file of your node application.

const cors = require('cors');

app.use(cors());

Upvotes: 1

Rajesh kumar R
Rajesh kumar R

Reputation: 214

Try the following code to bind RadTreeView and ContextMenu dynamically with edit, delete and add features.

JS:

<script type="text/javascript">
    function OnClientContextMenuItemClicking(sender, args)
     {
        var menuItem = args.get_menuItem();
        var treeNode = args.get_node();
        menuItem.get_menu().hide();
        switch (menuItem.get_value())
         {
            case "edit":
                treeNode.startEdit();
                break;
         }
     }
</script>

Hope this helps,

Upvotes: 1

mgouault
mgouault

Reputation: 78

I can only guess but in my opinion the issue can not be solved without changing your local API.

Your local api runs on localhost:10080 and does not allow CORS, so it will block everything not coming from localhost:10080.

From there, the two options are either your local API allows for some options and to allow CORS, or there is a way to serve your frontend from your API (and thus having the same origin).

See this ressource about CORS server-side: https://developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control

Upvotes: 0

SylwekFr
SylwekFr

Reputation: 328

You can try to add a proxy in your package.json :

   "proxy": "http://localhost:10080"

for more info on my research to try to answer you question you can find this website

Upvotes: 1

cristos
cristos

Reputation: 21

I'm assuming "http://localhost:10080/v1/" is your backend API if it's an express app ensure you have cors installed.

Upvotes: 0

Gowtham Koushik
Gowtham Koushik

Reputation: 274

var cors = require('cors');
var request = require('request-promise');
var express = require('express');
var app = express();
var server = app.listen('YOUR PORT', function(){console.log('Listening port 3000')});
app.use(cors());
app.get('/exchangeInfo', function (req,res) {
    request({
        method: 'GET',
        url: 'YOUR API',
        resolveWithFullResponse: true,
    }).then(r => {
        res.send(JSON.parse(r.body));
    }).catch()
});

You can use the above code in you local to run local server and overcome cors or you can use chrome plugin https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc?hl=en-GB

Upvotes: 0

Related Questions