4

Can someone help me please, I have a problem in CORS policy and I have no access to the backend of the site.

operaGX navigator console

This is the code I use in the backend (node.js):

app.use(cors({
  Access_Control_Allow_Origin: "*",
  origin:"*",
  methode:['GET','POST','PATCH','DELETE','PUT'],
  allowedHeaders:'Content-Type, Authorization, Origin, X-Requested-With, Accept'

}));

this is the code of the front end (I used Angular 13) to import API: environment.ts

export const environment = {
  production: false,
  serverURL: 'http://localhost:3000/api/'
};

I've tried also this code but it didn't work:

app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});
Chahnez Abbes
  • 41
  • 1
  • 1
  • 3
  • I'd check the [docs](https://www.npmjs.com/package/cors) again. `Access_Control_Allow_Origin` is.. something but not part of the cors package, `methode` is spelled incorrectly, you have `http://localhost:8888` as the allow origin but Angular is running on 4200, etc. Start from the docs and add slowly. – Phix Mar 14 '22 at 18:08
  • Willing to bet it is because of `methode` – epascarello Mar 14 '22 at 18:15
  • i copied this code from an other member response , and i've changed the origin to 4200 on my code, but it didn't work – Chahnez Abbes Mar 14 '22 at 18:27
  • Try the second answer. This solved my problem. Refer to this https://stackoverflow.com/questions/57009371/access-to-xmlhttprequest-at-from-origin-localhost3000-has-been-blocked – Gichuhi F Apr 08 '22 at 05:59

1 Answers1

3

Make sure you have the right imports:

var cors = require('cors')

var app = express()

and either use:

app.use(cors()) // this uses default values

Or change your code to this:

app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

Be careful with '*' as Access-Control-Allow-Origin in production. Change this back only to the clients that are allowed to connect to your API.

If that didn't help, then try to set proxy requests to enable CORS in Angular: Inside the src folder of your application, create a new file called proxy.conf.json. This is a JSON file that will contain the configuration for the proxy server. Here, we'll tell our Angular application to act as another server that takes API calls and diverts them to http://localhost:3000.

Inside the proxy.conf.json file, add the following code:

{
    "/api": {
        "target": "http://localhost:3000",
        "secure": false
    }
}

Next, inform Angular about this proxy configuration. We can do that by adding a proxyConfig option inside our angular.json file:

...
"architect": {
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "your-application-name:build",
"proxyConfig": "src/proxy.conf.json"
}
Lorraine R.
  • 1,545
  • 1
  • 14
  • 39