CORSは、クロスドメインノードJSを解決します
就学前の、本明細書に、このような理解
-
これらの例は、クロスドメインを持っていないのだろうか?
AJAX同一生成元ポリシー(ホストプロトコル(IPドメイン名)と同じポート)
クロスドメインのサーバー問題はありません
サーバーは、サーバーがクロスドメインの問題がない要求します
-
OPTIONS要求は何ですか?
一部のブラウザ要求では、正式なコミュニケーションの前にいったん増加しますHTTPクエリ、いわゆる「プリフライト」リクエスト(プリフライト)
ブラウザは最初のサーバー、ライセンス・サーバ・リストのかどうか、現在のウェブページのドメイン、およびHTTP動詞ことができますし、ヘッダフィールドの使用を要求します。
唯一の肯定応答は、ブラウザがそれ以外の場合は、エラーを正式な要求にXMLHttpRequestを発行します。
(一般的に、あなたは一つの方法は、OPTIONSを要求することで、あなたは第二のネットワーク・リターンを要求していることがわかります)
-
toLowerCaseメソッド()メソッドは、下部に文字列を変換するために使用されます
-
server.jsに以下の構成で
第二に、クロスドメインに対処します
1.ミドルウェアCORSの使用
インストールNPM私CORS -S
使用方法:すべてのためのクロスドメインのソースを有効にします
const cors = require('cors')
app.use(cors())
app.listen(8000, function () {
console.log('start')
})
使用方法:条件の設定
var express = require('express')
var cors = require('cors')
var app = express()
var whitelist = ['http://example1.com', 'http://example2.com']
// 异步配置
var corsOptions;
var corsOptionsDelegate = function (req, callback) {
if (whitelist.indexOf(req.header('Origin')) !== -1) {
corsOptions = { origin: true} //在CORS响应中反映(启用)请求的起源
} else {
corsOptions = { origin: false} // 拦截请求
}
callback(null, corsOptions) // error options
}
app.all("*", cors(corsOptionsDelegate), function (req, res, next) {
if(corsOptions.origin === true){
if (req.method.toLowerCase() == 'options'){
res.sendStatus(200); //让options尝试请求快速结束
}
else{
next();
}
} else {
res.sendStatus(500); //被拦截
}
})
app.post('/cors',(req,res)=> {
res.send('ok')
})
app.listen(8000, function () {
console.log('start')
})
2.唯一のルート傍受を達成するために
使用方法:すべてのためのクロスドメインのソースを有効にします
// 方式二 通过app路由的拦截
const express = require('express')
//express 实例化
const app = express()
// 所有请求都经过这里
app.all("*",function(req,res,next){
// 防止undefined 报错
if(!req.headers.origin){
return
}
//设置允许跨域的域名,*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin","*");
// 例如 允许百度跨域, 把上面这行的*替换为 https://baidu.com
//允许的header类型
res.header("Access-Control-Allow-Headers","content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
if (req.method.toLowerCase() == 'options'){
res.sendStatus(200); //让options预验证尝试请求快速结束
}
else{
next();
}
})
app.post('/cors',(req,res)=> {
res.send('ok')
})
app.listen(8000, function () {
console.log('start')
})
使用方法:条件の設定
// 允许多个跨域
const express = require('express')
//express 实例化
const app = express()
// 所有请求都经过这里
app.all("*",function(req,res,next){
var orginList=[
"http://www.bibi.com",
"http://www.qq.com",
"http://www.baidu.com"
]
// 防止undefined 报错
if(!req.headers.origin){
return
}
if(orginList.includes(req.headers.origin.toLowerCase())){
//允许的header类型
res.header("Access-Control-Allow-Headers", "content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
//设置允许跨域的域名,*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin",req.headers.origin);
if (req.method.toLowerCase() == 'options'){
res.sendStatus(200); //让options尝试请求快速结束
}
else{
next();
}
} else {
res.sendStatus(500)
}
})
app.post('/cors',(req,res)=> {
res.send('ok')
})
app.listen(8000, function () {
console.log('start')
})
3.フロントエンドプロキシサーバー
独自のサーバーノードを構築するためのノードがローカルサーバーをセットアップすると、AJAXリクエスト
バックエンドサーバーで要求ノード
インストールNPM私は-Sを要求します
const express = require('express')
//解析post消息体的插件
const request = require('request');
const bodyParser = require('body-parser')
//express 实例化
const app = express()
//使用中间件
//bodyParser.urlencoded 解析表单
app.use(bodyParser.urlencoded({
extended: false
}))
//解析json
app.use(bodyParser.json())
//自己的请求的接口
app.get('/cors',(req,res)=>{
//请求后端接口的地址
request('http://www.google.com', function (error, response, body) {
if(error){
console.log('error:', error);
} else {
console.log('body:', body);
res.send(body)
}
});
})
app.listen(8000, () => { //监听8000端口,开启服务
console.log('server start');
})