'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

Question

Can you help me, i have a function problematic: http://localhost:3000 has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource. If an opaque response serves your needs, set the request's mode to no-cors to fetch the resource:

  handleSubmit = e => {
         e.preventDefault();
         const data={
             'username' : this.username,
             'password' : this.password
         }
         fetch(process.env.REACT_APP_API_URL+'/api/login', data,{
             method:"POST",
             headers:{
                 'accept': 'application/json',
                 'Access-Control-Allow-Origin': "*",
                 'content-type': 'application/x-www-form-urlencoded',
                 'Access-Control-Allow-Credentials': 'true',
             }
         })
             .then(r => r.json());
         }

but there is a problem with the url, how do is solve it? enter image description here

You need to enable cors policies on your server, what server are you using as your backend? — Freestyle09, Feb 19 '21 at 09:18
I use node.js as the API, how do I access it? even though in the post man there is no problem — Yusup S, Feb 19 '21 at 09:21
[Obligatory MDN article](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) — rkosegi, Feb 19 '21 at 09:37
Does this answer your question? [Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-receive-a-no-access-control-allow-origin-header-i) — beniutek, Feb 19 '21 at 12:30

Maverick Fabroa · Answer 1 · 2022-01-21T03:36:01.943

2

You can't access resources when the origin you are accessing to is not the same as the origin you are using.

Fixes

As commented by @Freestyle09, you need to enable CORS policies in your backend:

In PHP:

header('Access-Control-Allow-Origin: *');

In node.js (Express):

Install cors package from npm.

var express = require('express');
var cors = require('cors');
var app = express();

app.use(cors());

This should set the headers to Access-Control-Allow-Origin: *, if you want to specify a host:

app.use(cors({
  origin: 'http://yourapp.com'
}))

Read more from this answer:

edited Jan 21 '22 at 03:36

answered Feb 19 '21 at 09:21

Maverick Fabroa

1,105
1
9
15

CORS is not just about `port`, it's about [origin](https://developer.mozilla.org/en-US/docs/Glossary/Origin) – rkosegi Feb 19 '21 at 09:38
Ok @Maverick and Freestyle09 I will try first – Yusup S Feb 19 '21 at 09:39
@rkosegi Yes, correct. But I emphasized what Yusup S' mistake or problem. – Maverick Fabroa Feb 19 '21 at 09:43

score 2 · Answer 2 · answered Sep 08 '22 at 14:19

In spring boot you can use annotation "@CrossOrigin". You will pass the url of your react app for parameter origins:

@CrossOrigin(origins = "http://localhost:3000",methods = RequestMethod.GET)
@GetMapping("/courses")
public Iterable<Course> getCourses() {
    CourseService courseService=new CourseService();
    return courseService.getAllCourses();
}

score 1 · Accepted Answer · answered Feb 20 '21 at 03:59

Thank you all for your input and answers, this problem has been resolved, and it's running.

this problem is simple, I just add it in pckage.json

  "proxy":"http://127.0.0.1:8000",

and i am use in axios fatch

axios({
        url:'/api/login',
        data:data,
        method:"POST",
        mode: 'no-cors',
        headers:{
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": process.env.REACT_APP_API_URL,
            "Access-Control-Request-Headers": 'Content-Type, Authorization'

        }
    })
    .then(res => {
        console.log(res);
    })
    .catch(err =>{
        console.log(err);
    })

and it's work for me thank you all (n_n)

how do you get this to work in production – Mar 01 '22 at 12:28 — , Mar 01 '22 at 12:28

'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

3 Answers3

Fixes