Origin <origin> non è consentito da Access-Control-Allow-Origin

XMLHttpRequest cannot load http://localhost:8080/api/test. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. 

Ho letto delle richieste Ajax tra domini e ho compreso il problema di sicurezza sottostante. Nel mio caso, 2 server sono in esecuzione in locale e desiderano abilitare le richieste tra domini durante i test.

localhost:8080 - Google Appengine dev server
localhost:3000 - Node.js server

Sto inviando una richiesta Ajax a localhost:8080 - GAE servermentre la mia pagina viene caricata dal server dei nodi. Qual è il più semplice e sicuro (non voglio avviare Chrome con l' disable-web-securityopzione). Se devo cambiare 'Content-Type', dovrei farlo sul server dei nodi? Come?

Poiché sono in esecuzione su porte diverse, sono JavaScript diversi origin. Non importa che si trovino sullo stesso computer / nome host.

È necessario abilitare CORS sul server (localhost: 8080). Dai un'occhiata a questo sito: http://enable-cors.org/

Tutto quello che devi fare è aggiungere un'intestazione HTTP al server:

Access-Control-Allow-Origin: http://localhost:3000

O, per semplicità:

Access-Control-Allow-Origin: *

Non ho pensato di usare "*" se il tuo server sta cercando di impostare cookie e tu lo usi withCredentials = true

quando risponde a una richiesta con credenziali, il server deve specificare un dominio e non può utilizzare il jolly.

Puoi leggere di più withCredentialsqui

Se hai bisogno di una rapida soluzione in Chrome per le richieste Ajax, questo plugin Chrome ti consente automaticamente di accedere a qualsiasi sito da qualsiasi fonte aggiungendo l'intestazione di risposta corretta

Estensione Chrome Allow-Control-Allow-Origin: *

Devi abilitare CORS per risolvere questo

se la tua app è creata con node.js semplice

impostalo nelle intestazioni della risposta come

var http = require('http');

http.createServer(function (request, response) {
response.writeHead(200, {
    'Content-Type': 'text/plain',
    'Access-Control-Allow-Origin' : '*',
    'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE'
});
response.end('Hello World\n');
}).listen(3000);

se la tua app è creata con Express Framework

usare un middleware CORS come

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', "*");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
}

e applicare tramite

app.configure(function() {
    app.use(allowCrossDomain);
    //some other code
});    

Ecco due link di riferimento

1. how-to-allow-cors-in-Express-nodejs
2. diving-into-node-js-very-first-app #vedi la sezione Ajax

Accetto la risposta di @Rocket hazmat perché mi porta alla soluzione. In effetti era sul server GAE che dovevo impostare l'intestazione. Ho dovuto impostare questi

"Access-Control-Allow-Origin" -> "*"
"Access-Control-Allow-Headers" -> "Origin, X-Requested-With, Content-Type, Accept"

l'impostazione ha "Access-Control-Allow-Origin" dato solo un errore

Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.

Inoltre, se è necessario inviare il token di autenticazione, aggiungere anche questo

"Access-Control-Allow-Credentials" -> "true"

Inoltre, al client, impostare withCredentials

questo fa sì che 2 richieste vengano inviate al server, una con OPTIONS. Il cookie di autenticazione non viene inviato con esso, quindi è necessario trattare l'autenticazione esterna.

In router.js basta aggiungere il codice prima di chiamare i metodi get / post. Funziona per me senza errori.

//Importing modules @Brahmmeswar
const express = require('express');
const router = express.Router();

const Contact = require('../models/contacts');

router.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  });

Stavo affrontando un problema durante la chiamata di risorse di origine incrociata utilizzando ajax da Chrome.

Ho usato il nodo js e il server http locale per distribuire la mia app js nodo.

Stavo ricevendo una risposta di errore quando accedevo alla risorsa di origine incrociata

Ho trovato una soluzione su questo,

1) Ho aggiunto il codice seguente al mio file app.js

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");

2) Nella mia pagina HTML chiamata risorsa di origine incrociata utilizzando $.getJSON();

$.getJSON("http://localhost:3000/users", function (data) {
    alert("*******Success*********");
    var response=JSON.stringify(data);
    alert("success="+response);
    document.getElementById("employeeDetails").value=response;
});

Se si utilizza express, è possibile utilizzare cors middleware come segue:

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

app.use(cors())

Aggiungi questo al tuo server NodeJS sotto le importazioni:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Se hai ottenuto 403, riduci i filtri nella configurazione tomcat WEB.XML al seguente:

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
</filter>

Finalmente ho ottenuto la risposta per Apache Tomcat8

Devi modificare il file tomcat web.xml.

probabilmente sarà nella cartella webapps,

sudo gedit /opt/tomcat/webapps/your_directory/WEB-INF/web.xml

trovalo e modificalo

<web-app>


<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
  <init-param>
    <param-name>cors.support.credentials</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>cors.preflight.maxage</param-name>
    <param-value>10</param-value>
  </init-param>
</filter>


<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>



</web-app>

Ciò consentirà a Access-Control-Allow-Origin tutti gli host. Se è necessario modificarlo da tutti gli host a solo il tuo host, è possibile modificare il

<param-name>cors.allowed.origins</param-name>
<param-value>http://localhost:3000</param-value>

sopra il codice da * a http: // your_public_IP o http://www.example.com

puoi fare riferimento qui alla documentazione del filtro Tomcat

Grazie

Ciao Questo è il modo di risolvere il problema CORS nel nodo Basta aggiungere queste righe sul lato "api" del server in Node.js (o qualunque sia il tuo file del server), prima di assicurarti di installare "cors"

    const express = require('express');
    const app = express();
    app.use(express.json());
    var cors = require('cors');
    app.use(cors());

usa dataType: 'jsonp', funziona per me.

   async function get_ajax_data(){

       var _reprojected_lat_lng = await $.ajax({

                                type: 'GET',

                                dataType: 'jsonp',

                                data: {},

                                url: _reprojection_url,

                                error: function (jqXHR, textStatus, errorThrown) {

                                    console.log(jqXHR)

                                },

                                success: function (data) {

                                    console.log(data);



                                    // note: data is already json type, you just specify dataType: jsonp

                                    return data;

                                }

                            });





 } // function               

Per PHP, usa questo per impostare le intestazioni.

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

router.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "*");
res.header("Access-Control-Allow-Headers", "*");
next();});

aggiungilo ai tuoi percorsi che stai chiamando dal front-end. Ad esempio, se si chiama http: // localhost: 3000 / users / register, è necessario aggiungere questo frammento di codice sul file .js back-end fornito da questa route.

Nel caso in cui chiunque cerchi la soluzione, se si utilizza express ecco la soluzione rapida.

const express = require('express')
const cors = require('cors')
const app = express()

1) installa cors usando npm npm install cors --save

2) importalo [richiede] const cors = require('cors')

3) usarlo come middleware app.use(cors())

per dettagli insatll e utilizzo di cors . Questo è tutto, speriamo che funzioni.

Se ti trovi in ​​Google Chrome, prova a installare questo componente aggiuntivo:

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related