CORSを許可する方法
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リクエストを送信していないようです。リソースのブロックを更新したばかりのときは、Origin間で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が正常かどうかをチェックするOPTIONS要求があります。
それで、私の主な質問は、私の場合はどうしてそうならないのでしょうか。 app.optionsブロックが呼び出されないのはなぜですか？メインのapp.getブロックにヘッダーを設定する必要があるのはなぜですか？
あなたの主な質問に答えるために、CORS仕様はPOSTまたはGETがその中に単純でない内容またはヘッダを持っているならば、OPTIONS呼び出しがPOSTまたはGETに先行することだけを要求します。
CORSのフライト前リクエスト（OPTIONS呼び出し）を必要とするContent-Typeは、任意のContent-Type 以下を除くです。
application/x-www-form-urlencodedmultipart/form-datatext/plain
上記以外の他のコンテンツタイプはフライト前のリクエストをトリガーします。
ヘッダに関しては、リクエストヘッダ以下を除くは飛行前のリクエストをトリガします。
AcceptAccept-LanguageContent-LanguageContent-TypeDPRSave-DataViewport-WidthWidth
他のリクエストヘッダは飛行前のリクエストをトリガします。
そのため、x-Trigger: CORSのようなカスタムヘッダーを追加すると、フライト前のリクエストがトリガーされ、OPTIONSブロックがヒットするはずです。
MDN Web APIリファレンス - CORSプリフライトリクエスト を参照してください。
最も簡単な方法は、node.jsパッケージ cors を使用することです。最も簡単な使い方は：
var cors = require('cors')
var app = express()
app.use(cors())
もちろん、あなたのニーズに合わせて動作を設定する方法はたくさんあります。上のリンク先のページはいくつかの例を示しています。
次の一致するルートに制御を渡してみてください。 Expressが最初にapp.getルートと一致している場合は、これを行わない限りオプションルートへは進みません （nextの使用に注意してください） ：
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 exampleに似ています
行う
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();
});
まずプロジェクトにCORをインストールするだけです。プロジェクトディレクトリにterminal（command prompt）と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();
});
これは私のために働きました..
テストは異なるポートでexpress + node + ion runningで行われます。
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();
});
少し前に、私はこの問題に直面したので、私は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);
これは、meanjsを使ったimと、その細かい動作、サファリ、クロムなどを使った、経路内での簡単な実装として、私にとってはうまくいきます。
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);
});
あなたがそれをコントローラ特有にしたいならば、あなたは使うことができます：
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も許可することに注意してください。
以下のコードを同じように参照することができます。出典： 学者/ 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ミドルウェアを使用すると、私にとって非常に便利です。すでに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);
});
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', ...)をやってもうまくいくと思いますが….
他の人が言ったことに加えて、nodemonを使用しない限り、変更を有効にするためにノードサーバーを再起動する必要があることを忘れないでください。
私は個人的に自分のブラウザを習慣からさっぱりさせていましたが、それがサーバサイドコードであることを忘れていました。
私の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();
})
以下は私のために働いた、それが誰かに役立つことを願っています！
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'));
});
これはPatの答えに似ていますが、res.sendStatus（200）で終わります。 next（）の代わりに。
コードは、メソッドタイプOPTIONSのすべてのリクエストをキャッチし、access-control-headersを送り返します。
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 。
私は自分の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を避けて代わりに他のサーバーにリクエストを転送することができます。
// 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");
});
express/externalライブラリなしでnodejsを使う私はserver.jsファイルの中で以下のメソッドを使いました。ここでの重要な部分は、リクエストヘッダからOriginを取得し、それからサーバレスポンス内でOriginを取得することです。一致が見つかった場合、許可されたOriginを含めて返されるヘッダを設定できます。
**const Origin = req.headers.Origin;**
let decoder = new StringDecoder('utf-8');
let buffer = '';
req.on('data', function (data) {
buffer += decoder.write(data);
});
req.on('end', function () {
buffer += decoder.end();
let chosenHandler = typeof (server.router[trimmedPath]) !== 'undefined' ? server.router[trimmedPath] : handlers.notFound;
const data = { ....data object vars}
// should be wrapped in try catch block
chosenHandler(data, function (statusCode, payload, contentType) {
server.processHandlerResponse(res, method, trimmedPath, statusCode, payload, contentType, **Origin**);
server.processHandlerResponse = function (res, method, trimmedPath, statusCode, payload, contentType, Origin) {
contentType = typeof (contentType) == 'string' ? contentType : 'json';
statusCode = typeof (statusCode) == 'number' ? statusCode : 200;
let payloadString = '';
if (contentType == 'json') {
res.setHeader('Content-Type', 'application/json');
const allowedOrigins = ['https://www.domain1.com', 'https://someotherdomain','https://yetanotherdomain',
...// as many as you need
];
**if (allowedOrigins.indexOf(Origin) > -1) {
res.setHeader('Access-Control-Allow-Origin', Origin);
}**
payload = typeof (payload) == 'object' ? payload : {};
payloadString = JSON.stringify(payload);
}
... // if (other content type) ...rinse and repeat..
私が@OPだったら、プログラミングのパラダイムを変えるでしょう。
localhostなどにリクエストを送信しているため、これらのCORSがブロックされていると仮定します。
最終的にGoogle Cloud PlatformやHerokuまたはのような本番オプトインにデプロイする場合、Originを許可するなど本番環境でCORSを心配する必要はありません。
したがって、サーバーをテストするときはpostmanを使用するだけで、CORSがブロックされることはありません。その後、サーバーを展開し、クライアントで作業します。
以下のコードは動作しますが、まず最初にcorsをインストールします。
npm install - corsを節約する
その後：
module.exports = function(app) {
var express = require("express");
var cors = require('cors');
var router = express.Router();
app.use(cors());
app.post("/movies",cors(), function(req, res) {
res.send("test");
});
const express = require("express");
const router = express.Router();
const app = express();
const cors = require("cors");
const options = {
Origin: true,
"Access-Control-Allow-Credentials": true,
"Access-Control-Allow-Origin": true,
"Access-Control-Allow-Headers": true,
"Access-Control-Expose-Headers": true
};
app.use(cors(options));
router.get("/", cors(options), (req, res) => {
res.render("index", { title: "Express" });
});
module.exports = router;
GOOGLE CHROMEの場合は、 "Allow-Control-Allow-Origin"拡張子を追加する必要があります。
Access-Control-Allow-Origin（応答ヘッダー）ヘッダーは、Origin要求ヘッダーの値を返すことによってリソースを共有できるかどうかを示します。 Access-Control-Allow-Originヘッダーは、クロスオリジンアクセスへの扉を開きます
Access-Control-Allow-Credentials（応答ヘッダー）：クライアントが資格情報の使用を許可されていることを示すにはtrueを使用します。デフォルトでは、認証された要求に対する応答はクライアントスクリプトによって読み取れません。だからあなたは応答にアクセスすることができます。また、デフォルトでは、CORSはクロスオリジンリクエストにクッキーを含まないため、クロスサイトリクエストフォージェリ（CSRF）と呼ばれる脆弱性のクラスにつながる可能性があります。 CORSにおけるCSRFの脆弱性の可能性を減らすために、CORSはサーバとクライアントの両方に、リクエストにクッキーを含めても問題ないことを認識することを要求します。
Access-Control-Expose-Headers（応答ヘッダー）は、どのヘッダーを公開しても安全であるかを示します。応答のどのヘッダを読むことができるかのリスト。デフォルトでは、Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragmaの6つの単純な応答ヘッダーのみが公開されています。
Access-Control-Request-Headers（要求ヘッダー）は、実際の要求中にどのHTTPヘッダーを使用できるかを示します。
Origin = true（要求ヘッダー）は要求の発信元を反映します。それが偽の場合、Corsは無効になります。
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);
最も簡単な方法は、プロジェクトにcorsモジュールをインストールすることです。
npm i --save cors
次に、サーバーファイルに次のようにインポートします。
import cors from 'cors';
それから単にこのようなミドルウェアとしてそれを使用してください：
app.use(cors());
お役に立てれば！