Mengapa tidak menambahkan header CORS ke rute OPSI memungkinkan browser mengakses API saya?

Saya mencoba untuk mendukung CORS dalam aplikasi Node.js saya yang menggunakan kerangka kerja Express.js. Saya telah membaca diskusi grup Google tentang cara menangani ini, dan membaca beberapa artikel tentang cara kerja CORS. Pertama, saya melakukan ini (kode ditulis dalam sintaks CoffeeScript):

app.options "*", (req, res) ->
  res.header 'Access-Control-Allow-Origin', '*'
  res.header 'Access-Control-Allow-Credentials', true
  # try: 'POST, GET, PUT, DELETE, OPTIONS'
  res.header 'Access-Control-Allow-Methods', 'GET, OPTIONS'
  # try: 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept'
  res.header 'Access-Control-Allow-Headers', 'Content-Type'
  # ...

Sepertinya tidak berhasil. Sepertinya browser saya (Chrome) tidak mengirimkan permintaan OPSI awal. Ketika saya baru saja memperbarui blok untuk sumber daya saya perlu mengirimkan permintaan GET lintas-asal ke:

app.get "/somethingelse", (req, res) ->
  # ...
  res.header 'Access-Control-Allow-Origin', '*'
  res.header 'Access-Control-Allow-Credentials', true
  res.header 'Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS'
  res.header 'Access-Control-Allow-Headers', 'Content-Type'
  # ...

Ini berfungsi (di Chrome). Ini juga berfungsi di Safari.

Saya telah membaca bahwa ...

Di browser yang menerapkan CORS, setiap permintaan GET atau POST asal silang didahului oleh permintaan OPSI yang memeriksa apakah GET atau POST OK.

Jadi pertanyaan utama saya adalah, mengapa ini tidak terjadi dalam kasus saya? Mengapa blok app.options saya tidak dipanggil? Mengapa saya perlu mengatur header di blok app.get utama saya?

Untuk menjawab pertanyaan utama Anda, spesifikasi CORS hanya membutuhkan panggilan OPTIONS untuk mendahului POST atau GET jika POST atau GET memiliki konten atau header yang tidak sederhana di dalamnya.

Konten-Jenis yang memerlukan permintaan pra-penerbangan CORS (panggilan OPSI) adalah Jenis-Konten apa pun kecuali yang berikut :

1. application/x-www-form-urlencoded
2. multipart/form-data
3. text/plain

Setiap Tipe-Konten lain selain dari yang tercantum di atas akan memicu permintaan pra-penerbangan.

Adapun Header, setiap Header Permintaan selain dari berikut ini akan memicu permintaan pra-penerbangan:

1. Accept
2. Accept-Language
3. Content-Language
4. Content-Type
5. DPR
6. Save-Data
7. Viewport-Width
8. Width

Tajuk Permintaan lainnya akan memicu permintaan pra-penerbangan.

Jadi, Anda dapat menambahkan tajuk khusus seperti:, x-Trigger: CORSdan itu akan memicu permintaan pra-penerbangan dan menekan blok PILIHAN.

Lihat Referensi API Web MDN - Permintaan Preflighted CORS

Saya menemukan cara termudah adalah dengan menggunakan paket node.js kor . Penggunaan paling sederhana adalah:

var cors = require('cors')

var app = express()
app.use(cors())

Tentu saja ada banyak cara untuk mengkonfigurasi perilaku sesuai kebutuhan Anda; halaman yang ditautkan di atas menunjukkan sejumlah contoh.

Coba lewati kontrol ke rute yang cocok berikutnya. Jika Express mencocokkan app.get rute terlebih dahulu, maka itu tidak akan melanjutkan ke rute opsi kecuali Anda melakukan ini (perhatikan penggunaan selanjutnya) :

app.get('somethingelse', function(req, res, next) {
    //..set headers etc.

    next();
});

Dalam hal mengatur barang-barang CORS, saya memasukkannya ke dalam middleware yang berfungsi dengan baik untuk saya:

//CORS middleware
var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'example.com');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');

    next();
}

//...
app.configure(function() {
    app.use(express.bodyParser());
    app.use(express.cookieParser());
    app.use(express.session({ secret: 'cool beans' }));
    app.use(express.methodOverride());
    app.use(allowCrossDomain);
    app.use(app.router);
    app.use(express.static(__dirname + '/public'));
});

Untuk tetap dalam gagasan yang sama tentang perutean. Saya menggunakan kode ini:

app.all('/*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
});

Mirip dengan contoh http://enable-cors.org/server_expressjs.html

melakukan

npm install cors --save

dan tambahkan saja baris-baris ini di file utama Anda di mana permintaan Anda pergi (simpan sebelum rute apa pun)

const cors = require('cors');
const express = require('express');
let app = express();
app.use(cors());
app.options('*', cors());

Saya telah membuat middleware yang lebih lengkap, cocok untuk mengekspresikan atau menghubungkan. Ini mendukung OPTIONSpermintaan untuk pemeriksaan preflight. Perhatikan bahwa ini akan memungkinkan CORS mengakses apa pun, Anda mungkin ingin melakukan beberapa pemeriksaan jika Anda ingin membatasi akses.

app.use(function(req, res, next) {
    var oneof = false;
    if(req.headers.origin) {
        res.header('Access-Control-Allow-Origin', req.headers.origin);
        oneof = true;
    }
    if(req.headers['access-control-request-method']) {
        res.header('Access-Control-Allow-Methods', req.headers['access-control-request-method']);
        oneof = true;
    }
    if(req.headers['access-control-request-headers']) {
        res.header('Access-Control-Allow-Headers', req.headers['access-control-request-headers']);
        oneof = true;
    }
    if(oneof) {
        res.header('Access-Control-Max-Age', 60 * 60 * 24 * 365);
    }

    // intercept OPTIONS method
    if (oneof && req.method == 'OPTIONS') {
        res.send(200);
    }
    else {
        next();
    }
});

instal modul kor expressjs. Anda dapat mengikuti langkah-langkah ini>

Instalasi

npm install cors

Penggunaan Sederhana (Aktifkan Semua Permintaan CORS)

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

untuk detail lebih lanjut, kunjungi https://github.com/expressjs/cors

Lakukan sesuatu seperti ini:

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

Pengujian dilakukan dengan express + node + ionic running di ports yang berbeda.

Localhost:8100

Localhost:5000

// CORS (Cross-Origin Resource Sharing) headers to support Cross-site HTTP requests

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

pertama-tama instal kor di proyek Anda. Ambil terminal (command prompt) dan cdke direktori proyek Anda dan jalankan perintah di bawah ini:

npm install cors --save

Kemudian ambil file server.js dan ubah kode untuk menambahkan yang berikut di dalamnya:

var cors = require('cors');


var app = express();

app.use(cors());

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

Ini bekerja untuk saya ..

Ini berfungsi untuk saya, karena ini adalah implementasi yang mudah di dalam rute, saya menggunakan meanjs dan berfungsi dengan baik, safari, chrome, dll.

app.route('/footer-contact-form').post(emailer.sendFooterMail).options(function(req,res,next){ 
        res.header('Access-Control-Allow-Origin', '*'); 
        res.header('Access-Control-Allow-Methods', 'GET, POST');
        res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
        return res.send(200);

    });

Beberapa waktu lalu, saya menghadapi masalah ini jadi saya melakukan ini untuk memungkinkan CORS di aplikasi nodejs saya:

Pertama, Anda perlu menginstal cors dengan menggunakan perintah di bawah ini:

npm install cors --save

Sekarang tambahkan kode berikut ke file awal aplikasi Anda seperti ( app.js or server.js)

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

var cors = require('cors');
var bodyParser = require('body-parser');

//enables cors
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

require('./router/index')(app);

Dalam saya index.jssaya menambahkan:

app.use((req, res, next) => {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
   res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
   next();
}) 

Jika Anda ingin membuatnya spesifik pengontrol, Anda dapat menggunakan:

res.setHeader('X-Frame-Options', 'ALLOWALL');
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'POST, GET');
res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

Harap dicatat bahwa ini juga akan memungkinkan iframe.

Dapat merujuk kode di bawah ini untuk hal yang sama. Sumber: Academind / node-restful-api

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

//acts as a middleware
//to handle CORS Errors
app.use((req, res, next) => { //doesn't send response just adjusts it
    res.header("Access-Control-Allow-Origin", "*") //* to give access to any origin
    res.header(
        "Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept, Authorization" //to give access to all the headers provided
    );
    if(req.method === 'OPTIONS'){
        res.header('Access-Control-Allow-Methods', 'PUT, POST, PATCH, DELETE, GET'); //to give access to all the methods provided
        return res.status(200).json({});
    }
    next(); //so that other routes can take over
})

Solusi paling sederhana saya dengan Express 4.2.0 (EDIT: Tampaknya tidak berfungsi di 4.3.0) adalah:

function supportCrossOriginScript(req, res, next) {
    res.status(200);
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Content-Type");

    // res.header("Access-Control-Allow-Headers", "Origin");
    // res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    // res.header("Access-Control-Allow-Methods","POST, OPTIONS");
    // res.header("Access-Control-Allow-Methods","POST, GET, OPTIONS, DELETE, PUT, HEAD");
    // res.header("Access-Control-Max-Age","1728000");
    next();
}

// Support CORS
app.options('/result', supportCrossOriginScript);

app.post('/result', supportCrossOriginScript, function(req, res) {
    res.send('received');
    // do stuff with req
});

Saya kira melakukan app.all('/result', ...)akan bekerja juga ...

Jawaban termudah adalah dengan hanya menggunakan paket kor .

const cors = require('cors');

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

Itu akan memungkinkan CORS di seluruh papan. Jika Anda ingin mempelajari cara mengaktifkan CORS tanpa modul luar , yang Anda perlukan hanyalah middleware Express yang menetapkan header 'Access-Control-Allow-Origin' . Itu minimum yang Anda butuhkan untuk membolehkan domain lintas permintaan dari browser ke server Anda.

app.options('*', (req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
  res.send('ok');
});

app.use((req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
});

Menggunakan Express Middleware sangat bagus untuk saya. Jika Anda sudah menggunakan Express, cukup tambahkan aturan middleware berikut. Seharusnya mulai bekerja.

app.all("/api/*", function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");
  res.header("Access-Control-Allow-Methods", "GET, PUT, POST");
  return next();
});

app.all("/api/*", function(req, res, next) {
  if (req.method.toLowerCase() !== "options") {
    return next();
  }
  return res.send(204);
});

Referensi

Di bawah ini bekerja untuk saya, semoga membantu seseorang!

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

app.use(cors({ origin: true }));

Dapatkan referensi dari https://expressjs.com/en/resources/middleware/cors.html#configuring-cors

Saya merasa sangat mudah melakukan ini dengan paket permintaan npm ( https://www.npmjs.com/package/request )

Kemudian saya mendasarkan solusi saya pada posting ini http://blog.javascripting.com/2015/01/17/dont-hassle-with-cors/

'use strict'

const express = require('express');
const request = require('request');

let proxyConfig = {
    url : {
        base: 'http://servertoreach.com?id=',
    }
}

/* setting up and configuring node express server for the application */
let server = express();
server.set('port', 3000);


/* methods forwarded to the servertoreach proxy  */
server.use('/somethingElse', function(req, res)
{
    let url = proxyConfig.url.base + req.query.id;
    req.pipe(request(url)).pipe(res);
});


/* start the server */
server.listen(server.get('port'), function() {
    console.log('express server with a proxy listening on port ' + server.get('port'));
});

Dalam naskah, jika Anda ingin menggunakan kor paket node.js

/**
* app.ts
* If you use the cors library
*/

import * as express from "express";
[...]
import * as cors from 'cors';

class App {
   public express: express.Application;

   constructor() {
       this.express = express();
       [..]
       this.handleCORSErrors();
   }

   private handleCORSErrors(): any {
       const corsOptions: cors.CorsOptions = {
           origin: 'http://example.com',
           optionsSuccessStatus: 200
       };
       this.express.use(cors(corsOptions));
   }
}

export default new App().express;

Jika Anda tidak ingin menggunakan pustaka bagian ketiga untuk penanganan kesalahan kors, Anda perlu mengubah metode handleCORSErrors ().

/**
* app.ts
* If you do not use the cors library
*/

import * as express from "express";
[...]

class App {
   public express: express.Application;

   constructor() {
       this.express = express();
       [..]
       this.handleCORSErrors();
   }

   private handleCORSErrors(): any {
       this.express.use((req, res, next) => {
           res.header("Access-Control-Allow-Origin", "*");
           res.header(
               "Access-Control-ALlow-Headers",
               "Origin, X-Requested-With, Content-Type, Accept, Authorization"
           );
           if (req.method === "OPTIONS") {
               res.header(
                   "Access-Control-Allow-Methods",
                   "PUT, POST, PATCH, GET, DELETE"
               );
               return res.status(200).json({});
           } 
           next(); // send the request to the next middleware
       });
    }
}

export default new App().express;

Untuk menggunakan file app.ts

/**
* server.ts
*/
import * as http from "http";
import app from "./app";

const server: http.Server = http.createServer(app);

const PORT: any = process.env.PORT || 3000;
server.listen(PORT);

Ini serupa dengan jawaban Pat dengan perbedaan yang saya selesaikan dengan res.sendStatus (200); bukannya next ();

Kode akan menangkap semua permintaan dari jenis metode OPSI dan mengirim kembali header kontrol akses.

app.options('/*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
    res.sendStatus(200);
});

Kode menerima CORS dari semua sumber sebagaimana diminta dalam pertanyaan. Namun, akan lebih baik untuk mengganti * dengan asal tertentu yaitu http: // localhost: 8080 untuk mencegah penyalahgunaan.

Karena kami menggunakan metode app.options alih-alih app.use-metode, kami tidak perlu melakukan pemeriksaan ini:

req.method === 'OPTIONS'

yang bisa kita lihat di beberapa jawaban lain.

Saya menemukan jawabannya di sini: http://johnzhang.io/options-request-in-express .

Anda dapat menggunakan Express middleware, memblokir domain dan metode Anda.

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", process.env.DOMAIN); // update to match the domain you will make the request from
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

Kami dapat menghindari CORS dan meneruskan permintaan ke server lain sebagai gantinya:

// config:
var public_folder = __dirname + '/public'
var apiServerHost = 'http://other.server'

// code:
console.log("starting server...");

var express = require('express');
var app = express();
var request = require('request');

// serve static files
app.use(express.static(public_folder));

// if not found, serve from another server
app.use(function(req, res) {
    var url = apiServerHost + req.url;
    req.pipe(request(url)).pipe(res);
});

app.listen(80, function(){
    console.log("server ready");
});

Saya menggunakan langkah-langkah berikut untuk aplikasi web saya dan saya berhasil:

Tambahkan paket cors ke express:

npm install cors --save

Tambahkan baris berikut setelah konfigurasi bodyParser . Saya mengalami beberapa masalah saat menambahkan sebelum bodyParser:

 // enable cors to the server
const corsOpt = {
    origin: process.env.CORS_ALLOW_ORIGIN || '*', // this work well to configure origin url in the server
    methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'], // to works well with web app, OPTIONS is required
    allowedHeaders: ['Content-Type', 'Authorization'] // allow json and token in the headers
};
app.use(cors(corsOpt)); // cors for all the routes of the application
app.options('*', cors(corsOpt)); // automatic cors gen for HTTP verbs in all routes, This can be redundant but I kept to be sure that will always work.

Pendekatan paling sederhana adalah memasang modul kor di proyek Anda menggunakan:

npm i --save cors

Kemudian dalam file server Anda impor menggunakan yang berikut:

import cors from 'cors';

Maka cukup gunakan sebagai middleware seperti ini:

app.use(cors());

Semoga ini membantu!

Jika saya jadi Anda @OP saya akan mengubah paradigma pemrograman saya.

dengan asumsi Anda membuat CORS ini diblokir karena Anda membuat permintaan ke localhost atau yang serupa.

Akhirnya, jika Anda akan menggunakan optoins produksi seperti Google Cloud Platformatau Heroku, Anda tidak perlu khawatir tentang CORS seperti mengizinkan asal atau apa pun saat dalam produksi.

jadi ketika menguji server gunakan saja postmandan Anda tidak akan mendapatkan CORS diblokir, setelah itu menyebarkan server Anda dan kemudian bekerja pada klien Anda.

/ * pertama-tama, dan ini mungkin masalah di antara para junior devs di luar sana, seperti saya: pastikan untuk menggunakan "lambda" >>>> "` "dan bukan" '"dalam metode pengambilan Anda ! * /

`` `const response = await fetch ( https://api....);

/ plus, artikel berikut ini sangat dianjurkan: https://developer.edamam.com/api/faq /

sederhana itu sulit:

 let my_data = []
const promise = new Promise(async function (resolve, reject) {
    axios.post('https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/directions/json?origin=33.69057660000001,72.9782724&destination=33.691478,%2072.978594&key=AIzaSyApzbs5QDJOnEObdSBN_Cmln5ZWxx323vA'
        , { 'Origin': 'https://localhost:3000' })
        .then(function (response) {
            console.log(`axios response ${response.data}`)
            const my_data = response.data
            resolve(my_data)
        })
        .catch(function (error) {
            console.log(error)
            alert('connection error')
        })
})
promise.then(data => {
    console.log(JSON.stringify(data))
})

Coba ini di file js utama Anda:

app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header(
  "Access-Control-Allow-Headers",
  "Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method"
);
res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
res.header("Allow", "GET, POST, OPTIONS, PUT, DELETE");
next();
});

Ini harus menyelesaikan masalah Anda