CORSヘッダーをOPTIONSルートに追加しないと、ブラウザーが私のAPIにアクセスできないのはなぜですか？

Express.js Webフレームワークを使用するNode.jsアプリケーションでCORSをサポートしようとしています。Googleグループディスカッションを読みましたこれを処理し、どのようにCORS作品についていくつかの記事を読む方法についてを。最初に、これを行いました（コードは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'
  # ...

動作していないようです。ブラウザ（Chrome）が最初のOPTIONSリクエストを送信していないようです。リソースのブロックを更新したばかりのときに、クロスオリジンGETリクエストを次の宛先に送信する必要があります。

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'
  # ...

（Chromeで）動作します。これはSafariでも機能します。

私はそれを読んだ...

CORSを実装するブラウザーでは、各クロスオリジンGETまたはPOSTリクエストの前に、GETまたはPOSTがOKであるかどうかをチェックするOPTIONSリクエストがあります。

だから私の主な質問は、なぜこれが私の場合には起こらないように見えるのですか？app.optionsブロックが呼び出されないのはなぜですか？メインのapp.getブロックでヘッダーを設定する必要があるのはなぜですか？

主な質問に答えるために、CORS仕様では、POSTまたはGETに単純でないコンテンツまたはヘッダーが含まれている場合、POSTまたはGETに先行するOPTIONS呼び出しのみが必要です。

CORSプリフライトリクエスト（OPTIONSコール）を必要とするContent-Type は、以下を除くすべてのContent-Type です。

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

上記以外のContent-Typeは、プリフライトリクエストをトリガーします。

ヘッダーについては、以下のリクエストヘッダーを除いて、プリフライトリクエストがトリガーされます。

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

他のリクエストヘッダーはプリフライトリクエストをトリガーします。

したがって、次のようなカスタムヘッダーを追加できます。x-Trigger: CORSこれにより、プリフライトリクエストがトリガーされ、OPTIONSブロックがヒットします。

MDN Web APIリファレンス-CORSプリフライトリクエストをご覧ください。

最も簡単な方法は、node.jsパッケージのcorsを使用することです。最も簡単な使用法は次のとおりです。

var cors = require('cors')

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

もちろん、動作をニーズに合わせて構成するには多くの方法があります。上記のリンク先のページには、いくつかの例が示されています。

次の一致するルートに制御を渡してみてください。Expressが最初にapp.getルートに一致する場合、これを行わない限り、オプションルートに進みません（次の使用に注意してください）。

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

    next();
});

CORSのものを整理するという点で、私はそれを自分にとってうまく機能しているミドルウェアに入れました。

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

ルーティングの同じ考えにとどまること。私はこのコードを使用します：

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

http://enable-cors.org/server_expressjs.htmlの例と同様

行う

npm install cors --save

そして、これらの行をメインファイルに追加して、リクエストを送信します（ルートの前に置いておきます）。

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

ExpressまたはConnectに適したより完全なミドルウェアを作成しました。OPTIONSプリフライトチェックのリクエストをサポートします。CORSが何にでもアクセスできるようにすることに注意してください。アクセスを制限したい場合は、いくつかのチェックを入れることをお勧めします。

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

expressjsのcorsモジュールをインストールします。次の手順を実行できます>

取り付け

npm install cors

簡単な使用法（すべてのCORS要求を有効にする）

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

詳細については、https：//github.com/expressjs/corsにアクセスしてください

このようなことをしてください：

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

テストは、異なるポートで実行されるエクスプレス+ノード+イオンで行われました。

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

まず、単にプロジェクトにcorsをインストールします。ターミナル（コマンドプロンプト）を使用cdしてプロジェクトディレクトリに移動し、以下のコマンドを実行します。

npm install cors --save

次に、server.jsファイルを取得し、コードを変更して以下を追加します。

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

これは私のために働いた。

これは、ルート内での簡単な実装であり、meanjsとその正常な動作、サファリ、クロムなどを使用しているため、私にとってはうまくいきます。

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

    });

少し前に、私はこの問題に直面したので、nodejsアプリでCORSを許可するためにこれを行いました：

まず、以下のコマンドを使用してインストールする必要があり ますcors。

npm install cors --save

さて、次のコードを追加します（のようなアプリの起動ファイルへ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);

私のindex.js中で：

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

コントローラ固有にしたい場合は、以下を使用できます。

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

これによりiframeも許可されることに注意してください。

同じために以下のコードを参照できます。ソース：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
})

Express 4.2.0（編集：4.3.0では動作しないようです）での私の最も簡単な解決策は次のとおりです。

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

私app.all('/result', ...)もそうすることがうまくいくと思います...

最も簡単な答えは、単にcorsパッケージを使用することです。

const cors = require('cors');

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

それは全面的にCORSを有効にします。外部モジュールなしでCORSを有効にする方法を学びたい場合、本当に必要なのは「Access-Control-Allow-Origin」ヘッダーを設定するExpressミドルウェアだけです。これは、ブラウザーからサーバーへのクロスリクエストドメインを許可するために必要な最小値です。

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

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

Express Middlewareの使用は私にとってはうまくいきます。すでにExpressを使用している場合は、次のミドルウェアルールを追加するだけです。動作するはずです。

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

参照

以下は私のために働きました、それが誰かを助けることを願っています！

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

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

https://expressjs.com/en/resources/middleware/cors.html#configuring-corsから参照を取得しました

npmリクエストパッケージ（https://www.npmjs.com/package/request）でこれを行うのは非常に簡単であることがわかりました）で

次に、この投稿に基づいて解決策を立てました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'));
});

typescriptで、node.jsパッケージcorsを使用する場合

/**
* 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;

corsエラー処理にサードパートライブラリを使用しない場合は、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;

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

これはPatの答えと似ていますが、res.sendStatus（200）で終わる点が異なります。next（）;の代わりに

コードは、メソッドタイプOPTIONSのすべてのリクエストをキャッチし、アクセス制御ヘッダーを返します。

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

コードは、質問で要求されているように、すべての発信元からCORSを受け入れます。ただし、*を特定のオリジン、つまりhttp：// localhost：8080に置き換える方が適切です。誤用を防ぐためににことをお勧めします。

app.use-methodの代わりにapp.options-methodを使用するため、このチェックを行う必要はありません。

req.method === 'OPTIONS'

他のいくつかの答えで見ることができます。

私はここで答えを見つけました：http : //johnzhang.io/options-request-in-express。

Expressミドルウェアを使用して、ドメインとメソッドをブロックできます。

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

CORSを回避して、代わりにリクエストを他のサーバーに転送できます。

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

私は自分のWebアプリに次の手順を使用して成功しました。

corsパッケージをエクスプレスに追加します。

npm install cors --save

bodyParser構成の後に次の行を追加します。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.

最も簡単なアプローチは、プロジェクトにcorsモジュールをインストールすることです：

npm i --save cors

次に、サーバーファイルに以下を使用してインポートします。

import cors from 'cors';

次に、次のようにミドルウェアとして使用します。

app.use(cors());

お役に立てれば！

私があなただったら、私のプログラミングパラダイムを変えるでしょう。

localhostなどにリクエストを送信しているため、これらのCORSがブロックされていると想定します。

最終的にGoogle Cloud Platformor Herokuやのような運用オプトインにデプロイする場合、運用中には、allow originなどのCORSについて心配する必要はありません。

したがって、サーバーをテストするときは、使用するだけでpostmanCORSがブロックされません。その後、サーバーをデプロイしてクライアントで作業します。

/ *まず第一に、これは私と同じように、ジュニア開発者の間で問題になる可能性があります。フェッチでは、「 '」ではなく「lambda」>>>>「 `」を使用してください。メソッド。* /

`` `const応答=フェッチを待つ（https://api....）;

/ さらに、次の記事を強くお勧めします：https : //developer.edamam.com/api/faq /

シンプルは難しい：

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

メインのjsファイルでこれを試してください：

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

これはあなたの問題を解決するはずです