XMLHttpRequest cannot load http://localhost:8080/api/test. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
Saya membaca tentang cross domain ajax permintaan, dan memahami yang mendasari masalah keamanan. Dalam kasus saya, 2 server yang berjalan secara lokal, dan aktifkan cross domain permintaan selama pengujian.
localhost:8080 - Google Appengine dev server
localhost:3000 - Node.js server
Aku mengeluarkan permintaan ajax untuk localhost:8080 - GAE server
ketika halaman di-load dari server node. Apa adalah cara termudah dan paling aman ( Don't ingin memulai chrome dengan disable-web-keamanan
pilihan). Jika saya harus mengubah 'Content-Type'
, aku harus melakukannya pada node server? Bagaimana?
Karena mereka berjalan pada port yang berbeda, mereka berbeda JavaScript asal
. Itu doesn't peduli bahwa mereka berada pada mesin yang sama/hostname.
Anda perlu mengaktifkan CORS pada server (localhost:8080). Check out this site: http://enable-cors.org/
Semua yang perlu anda lakukan adalah menambahkan sebuah header HTTP ke server:
Access-Control-Allow-Origin: http://localhost:3000
Atau, untuk kesederhanaan:
Access-Control-Allow-Origin: *
Jika anda membutuhkan pekerjaan cepat sekitar di Chrome untuk permintaan ajax, ini plugin chrome secara otomatis memungkinkan anda untuk mengakses setiap situs dari setiap sumber dengan menambahkan respon yang tepat header
Anda harus mengaktifkan CORS untuk memecahkan masalah ini
ditetapkan di header respon seperti
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);
menggunakan CORS middleware 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 berlaku melalui
app.configure(function() {
app.use(allowCrossDomain);
//some other code
});
Berikut ini adalah dua link referensi
Saya menerima @Roket hazmat's jawaban seperti itu membawa saya ke dalam larutan. Memang pada GAE server yang saya butuhkan untuk mengatur header. Aku harus mengatur ini
"Access-Control-Allow-Origin" -> "*"
"Access-Control-Allow-Headers" -> "Origin, X-Requested-With, Content-Type, Accept"
pengaturan hanya "Access-Control-Allow-Origin"
memberikan kesalahan
Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.
Juga, jika otentikasi token yang perlu dikirim, tambahkan juga
"Access-Control-Allow-Credentials" -> "true"
Juga, pada klien, mengatur withCredentials
hal ini menyebabkan 2 permintaan untuk dikirim ke server, salah satunya dengan PILIHAN
. Auth cookie tidak mengirim dengan itu, maka perlu untuk mengobati luar tupoksi.
Saya menghadapi masalah saat menelepon cross asal sumber daya menggunakan ajax dari chrome.
Saya telah menggunakan node js dan lokal http server untuk menyebarkan saya node js aplikasi.
Saya mendapatkan respon kesalahan, ketika saya akses lintas asal sumber daya
Saya menemukan satu solusi yang ,
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
$.getJSON();
$.getJSON("http://localhost:3000/users", function (data) {
alert("*******Success*********");
var response=JSON.stringify(data);
alert("success="+response);
document.getElementById("employeeDetails").value=response;
});
Di router.js hanya menambahkan kode sebelum memanggil get/post metode. Ia 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();
});
Jika anda punya 403 setelah itu silakan mengurangi filter di WEB.XML tomcat config 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>
Tambahkan ini ke Server NodeJS di bawah ini 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();
});
Akhirnya saya mendapat jawaban untuk apache Tomcat8
Anda harus mengedit tomcat web.xml file.
probabily itu akan berada di dalam folder webapps,
sudo gedit /opt/tomcat/webapps/your_directory/WEB-INF/web.xml
menemukan dan mengedit
<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 Akses-Kontrol-Allow-Origin semua host. Jika anda perlu untuk mengubah itu semua host hanya host anda, anda dapat mengedit
<param-name>cors.allowed.origins</param-name>
<param-value>http://localhost:3000</param-value>
kode di atas dari * untuk anda http://your_public_IP atau http://www.example.com
anda bisa lihat di sini Tomcat filter dokumentasi
Terima kasih
Hi Ini adalah cara untuk memecahkan CORS masalah di node Hanya menambahkan baris ini pada server "api" di sisi Node.js(atau apa yang pernah anda File server), sebelum itu pastikan untuk menginstal "cors"
const express = require('express');
const app = express();
app.use(express.json());
var cors = require('cors');
app.use(cors());
menggunakan 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, menggunakan ini untuk mengatur header.
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");
Jika anda're di Google Chrome, coba menginstal add-on ini: