CORSノードJSは、クロスドメインの問題(完全な例)を解きます

CORSは、クロスドメインノードJSを解決します

就学前の、本明細書に、このような理解

  1. これらの例は、クロスドメインを持っていないのだろうか?

    AJAX同一生成元ポリシー(ホストプロトコル(IPドメイン名)と同じポート)

クロスドメインのサーバー問題はありません

サーバーは、サーバーがクロスドメインの問題がない要求します

  1. OPTIONS要求は何ですか?

    一部のブラウザ要求では、正式なコミュニケーションの前にいったん増加しますHTTPクエリ、いわゆる「プリフライト」リクエスト(プリフライト)

    ブラウザは最初のサーバー、ライセンス・サーバ・リストのかどうか、現在のウェブページのドメイン、およびHTTP動詞ことができますし、ヘッダフィールドの使用を要求します。

    唯一の肯定応答は、ブラウザがそれ以外の場合は、エラーを正式な要求にXMLHttpRequestを発行します。

    (一般的に、あなたは一つの方法は、OPTIONSを要求することで、あなたは第二のネットワーク・リターンを要求していることがわかります)

  2. toLowerCaseメソッド()メソッドは、下部に文字列を変換するために使用されます

  3. 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');
})
公開された52元の記事 ウォン称賛82 ビュー30000 +

おすすめ

転載: blog.csdn.net/marendu/article/details/103257186