<origin> kaynağına Access-Control-Allow-Origin tarafından izin verilmiyor

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

Web alanları arası ajax isteklerini okudum ve temel güvenlik sorununu anladım. Benim durumumda, 2 sunucu yerel olarak çalışıyor ve test sırasında alanlar arası istekleri etkinleştirmek istiyor.

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

Sayfam localhost:8080 - GAE serverdüğüm sunucusundan yüklenirken için bir ajax isteği yayınlıyorum . En kolay ve en güvenli olan nedir (Chrome'u disable-web-securityseçenekle başlatmak istemiyorum ). Değiştirmem 'Content-Type'gerekirse, düğüm sunucusunda mı yapmalıyım? Nasıl?

Farklı bağlantı noktalarında çalıştıklarından, farklı JavaScriptlerdir origin. Aynı makine / ana bilgisayar adında olmaları önemli değildir.

Sunucuda CORS'yi etkinleştirmeniz gerekir (localhost: 8080). Bu siteye göz atın: http://enable-cors.org/

Tek yapmanız gereken sunucuya bir HTTP başlığı eklemek:

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

Veya basitlik için:

Access-Control-Allow-Origin: *

Sunucunuz çerez ayarlamaya çalışıyorsa ve " withCredentials = true

kimlik bilgisi talebine yanıt verirken, sunucunun bir etki alanı belirtmesi gerekir ve joker karakter kullanamaz.

withCredentialsBuradan daha fazla bilgi edinebilirsiniz

Ajax istekleri için Chrome'da hızlı bir çalışmaya ihtiyacınız varsa, bu krom eklentisi, uygun yanıt başlığını ekleyerek herhangi bir kaynaktan herhangi bir siteye otomatik olarak erişmenizi sağlar

Chrome Uzantısı Allow-Control-Allow-Origin: *

Bunu çözmek için CORS'u etkinleştirmelisiniz

uygulamanız basit node.js ile oluşturulmuşsa

yanıt başlıklarınızda

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);

uygulamanız ekspres çerçeve ile oluşturulmuşsa

gibi bir CORS ara katmanı kullanın

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();
}

ve üzerinden başvur

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

İşte iki referans bağlantısı

1. nasıl yapılır-izin-cors-in-express-nodejs
2. Düğüm-içine-js-çok-ilk-uygulama # Ajax bölümüne bakın

@Rocket hazmat'ın cevabı beni çözüme götürdüğü için kabul ediyorum. Başlığı ayarlamak için gereken GAE sunucusundaydı. Bunları ayarlamak zorundaydım

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

ayar sadece "Access-Control-Allow-Origin" hata verdi

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

Ayrıca, yetkilendirme jetonunun gönderilmesi gerekiyorsa, bunu da ekleyin

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

Ayrıca, istemcide, withCredentials

Bu sunucuya bir tane olmak üzere 2 istek gönderilmesine neden olur OPTIONS. Auth tanımlama bilgisi onunla gönderilmez, bu nedenle auth dışında davranmanız gerekir.

Router.js'de get / post yöntemlerini çağırmadan önce kodu ekleyin. Benim için hatasız çalışır.

//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();
  });

Krom ajax kullanarak çapraz kökenli kaynak çağırırken bir sorunla karşı karşıya kaldım.

Düğüm js uygulamasını dağıtmak için düğüm js ve yerel http sunucusu kullandım.

Kaynaklar arası kaynağa eriştiğimde hata yanıtı alıyordum

Bu konuda bir çözüm buldum,

1) app.js dosyama aşağıdaki kodu ekledim

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

2) html sayfamda çapraz kaynak kullanarak $.getJSON();

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

Express kullanıyorsanız, cors ara katman yazılımını aşağıdaki gibi kullanabilirsiniz:

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

app.use(cors())

Aşağıdakileri aşağıdaki NodeJS Sunucunuza ekleyin:

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();
});

Bundan sonra 403'ünüz varsa lütfen WEB.XML tomcat config'teki filtreleri aşağıdakilere azaltın:

<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>

Sonunda apache Tomcat8'in cevabını aldım

Tomcat web.xml dosyasını düzenlemeniz gerekir.

muhtemelen webapps klasörünün içinde olacak,

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

bul ve düzenle

<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>

Bu, tüm ana bilgisayarlara Erişim-Kontrol-İzin Ver-Kökenli izin verir. Tüm ana bilgisayarlardan yalnızca ana makinenize değiştirmeniz gerekirse,

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

* 'den http: // your_public_IP veya http://www.example.com adresinize yukarıdaki kod

Tomcat filtre belgelerine buradan ulaşabilirsiniz

Teşekkürler

Merhaba Bu düğüm CORS sorunu çözmek için yol Sadece Node.js sunucu "api" tarafında bu satırları ekleyin (ya da herhangi bir sunucu dosyası), "cors" yüklediğinizden emin olun

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

dataType kullanın: 'jsonp', benim için çalışıyor.

   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               

PHP için, üstbilgileri ayarlamak için bunu kullanın.

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();});

bunu ön uçtan aradığınız rotalara ekleyin. Örneğin, http: // localhost: 3000 / users / register'ı çağırırsanız, bu kod parçasını bu yolun yerleştirdiği arka uç .js dosyanıza eklemeniz gerekir.

Herkes çözüm arıyor durumunda, burada ekspres kullanıyorsanız hızlı çözümdür.

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

1) npm kullanarak korleri takın npm install cors --save

2) ithalat [gerektirir] const cors = require('cors')

3) ara katman yazılımı olarak kullanın app.use(cors())

detaylar için korseler ve kullanımı . İşte bu, umarım işe yarar.

Google Chrome'daysanız, bu eklentiyi yüklemeyi deneyin:

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