Origin <origin> tidak diizinkan oleh Access-Control-Allow-Origin

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

Saya membaca tentang permintaan ajax lintas domain, dan memahami masalah keamanan yang mendasarinya. Dalam kasus saya, 2 server berjalan secara lokal, dan ingin mengaktifkan permintaan lintas domain selama pengujian.

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

Saya mengeluarkan permintaan ajax untuk localhost:8080 - GAE serversementara halaman saya diambil dari server node. Apa yang paling mudah, dan paling aman (Tidak ingin memulai chrome dengan disable-web-securityopsi). Jika saya harus berubah 'Content-Type', haruskah saya melakukannya di server node? Bagaimana?

Karena mereka berjalan pada port yang berbeda, mereka berbeda JavaScript origin. Tidak masalah mereka menggunakan mesin / nama host yang sama.

Anda perlu mengaktifkan CORS di server (localhost: 8080). Lihatlah situs ini: http://enable-cors.org/

Yang perlu Anda lakukan adalah menambahkan header HTTP ke server:

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

Atau, untuk kesederhanaan:

Access-Control-Allow-Origin: *

Pemikiran tidak menggunakan "*" jika server Anda mencoba mengatur cookie dan Anda menggunakan withCredentials = true

ketika menanggapi permintaan kredensial, server harus menentukan domain, dan tidak dapat menggunakan wild carding.

Anda dapat membaca lebih lanjut tentang withCredentialsdi sini

Jika Anda memerlukan penyelesaian cepat di Chrome untuk permintaan ajax, plugin chrome ini secara otomatis memungkinkan Anda untuk mengakses situs mana pun dari sumber apa pun dengan menambahkan header respons yang tepat

Ekstensi Chrome Allow-Control-Allow-Origin: *

Anda harus mengaktifkan CORS untuk menyelesaikan ini

jika aplikasi Anda dibuat dengan node.js sederhana

atur di tajuk respons Anda

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

jika aplikasi Anda dibuat dengan kerangka kerja ekspres

gunakan middleware CORS seperti

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

dan melamar via

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

Berikut adalah dua tautan referensi

1. bagaimana-untuk-memungkinkan-cors-in-express-nodejs
2. menyelam-ke-simpul-js-sangat-pertama-aplikasi # lihat bagian Ajax

Saya menerima jawaban @Rocket Hazmat karena itu menuntun saya ke solusi. Memang di server GAE saya perlu mengatur header. Saya harus mengatur ini

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

pengaturan hanya "Access-Control-Allow-Origin" memberi kesalahan

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

Juga, jika token auth perlu dikirim, tambahkan ini juga

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

Juga, pada klien, atur withCredentials

ini menyebabkan 2 permintaan dikirim ke server, satu dengan OPTIONS. Cookie auth tidak dikirim bersamaan, karenanya harus memperlakukan auth luar.

Di router.js cukup tambahkan kode sebelum memanggil metode get / post. Ini bekerja untuk saya tanpa kesalahan.

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

Saya menghadapi masalah saat memanggil sumber daya asal lintas menggunakan ajax dari chrome.

Saya telah menggunakan simpul js dan server http lokal untuk menggunakan aplikasi simpul js saya.

Saya mendapatkan respons kesalahan, ketika saya mengakses sumber daya lintas asal

Saya menemukan satu solusi untuk itu,

1) Saya telah menambahkan kode di bawah ini ke file app.js saya

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

2) Di halaman html saya disebut sumber daya lintas menggunakan $.getJSON();

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

Jika Anda menggunakan express, Anda dapat menggunakan cors middleware sebagai berikut:

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

app.use(cors())

Tambahkan ini ke Server NodeJS Anda di bawah impor:

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

Jika Anda mendapatkan 403 setelah itu harap kurangi filter di WEB.XML konfigurasi kucing jantan sebagai berikut:

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

Saya akhirnya mendapat jawaban untuk apache Tomcat8

Anda harus mengedit file tomcat web.xml.

mungkin itu akan berada di dalam folder webapps,

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

temukan dan edit

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

Ini akan memungkinkan Access-Control-Allow-Origin semua host. Jika Anda perlu mengubahnya dari semua host menjadi hanya host Anda, Anda dapat mengedit

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

kode di atas dari * ke http Anda : // your_public_IP atau http://www.example.com

Anda dapat merujuk di sini dokumentasi filter Tomcat

Terima kasih

Hai Ini adalah cara untuk menyelesaikan masalah CORS di node. Cukup tambahkan baris ini di server "api" di Node.js (atau apa pun file server Anda), sebelum itu pastikan untuk menginstal "cors"

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

gunakan dataType: 'jsonp', bekerja untuk saya.

   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               

Untuk PHP, gunakan ini untuk mengatur tajuk.

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

tambahkan ini ke rute Anda yang Anda panggil dari front-end. Contoh jika Anda memanggil http: // localhost: 3000 / pengguna / daftar, Anda harus menambahkan fragmen kode ini pada file .js back-end Anda yang diletakkan oleh rute ini.

Jika ada yang mencari solusi, jika Anda menggunakan express di sini adalah solusi cepat.

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

1) pasang kor menggunakan npm npm install cors --save

2) impor [memerlukan] const cors = require('cors')

3) menggunakannya sebagai middleware app.use(cors())

untuk perincian insatll dan penggunaan kor . Itu dia, semoga berhasil.

Jika Anda berada di Google Chrome, coba pasang pengaya ini:

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