Node.js-エクスプレスでcorsクロスオリジンリソースシェアリングを有効にする

一緒に書く習慣を身につけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して12日目です。クリックしてイベントの詳細をご覧ください。

corsクロスドメインリソースシェアリング

インターフェイスに関するクロスドメインの問題

GETおよびPOSTインターフェースの記述には重大な問題があります。クロスドメイン要求はサポートされていません。

例

ルーティングモジュール

const express = require('express')
const router = express.Router()
 
router.post('/post', (req, res) =>{
    const body = req.body
        res.send({
        status:0,
        msg:'POST 请求',
        data:body
    })
})
module.exports = router
复制代码

サーバー側コード

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

app.use(express.urlencoded({extended: false}))

const router = require('./apiRouter')
app.use('/api', router)

app.listen(80, ()=> {
    console.log('express 服务器运行在 http://127.0.0.1.80')
})
复制代码

テストページ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js"></script>
</head>
<body>
    <button id="postBut"> POST </button>
   
   <script>
    $(function(){
            测试 POST 接口
            $('#postBut').on('click', function(){
                $.ajax({
                    type:'POST',
                    url:'http://127.0.0.1/api/post',
                    data:{name:'haimeimei', age: 18},
                    success: function(res){
                        console.log(res)
                    }
                })
            })
        })
    </script>
</body>
</html>
复制代码

Webページの[POST]ボタンをクリックすると、要求は成功せず、端末はエラーを報告します（インターフェイスのクロスドメインの問題があります）。Webページはファイルプロトコル（file:///...）を介して開かれますが、要求されたインターフェイスはhttpプロトコルであり、さまざまなプロトコルがあります。プロトコル、ドメイン名、ポート番号のいずれかが異なる限り、クロスドメインの問題が発生します

アクセスリンク：

ターミナルエラー

インターフェイスクロスドメインの問題の解決策

cors主流のソリューション（推奨）
jsonp欠陥のあるソリューション（GETリクエストのみをサポート）

corsミドルウェアを使用してクロスドメインの問題を解決する

corsはExpressのサードパーティミドルウェアです。corsミドルウェアをインストールして設定することで、クロスドメインの問題を簡単に解決できます。
使用手順は3つの手順に分かれています
- npm install corsインストールミドルウェアを実行します
- const cors = require('cors')インポートミドルウェアを使用する
- ルーティングする前にapp.use(cors())configure

例

上記のコードは変更されておらず、サーバー側のコードのみを変更する必要があります。また、インターフェイスのクロスドメインの問題を解決するために、ルーティングの前にcorsミドルウェアを構成する必要があります。

 const express = require('express')
 const app = express()
 
 app.use(express.urlencoded({extended: false}))
 
 // 配置 cors 这个中间件
 const cors = require('cors')
 app.use(cors())
 
 const router = require('./apiRouter')
 app.use('/api', router)
 
 app.listen(80, ()=> {
     console.log('express 服务器运行在 http://127.0.0.1.80')
 })
复制代码

Web端末情報

Node.js-エクスプレスでcorsクロスオリジンリソースシェアリングを有効にする

corsクロスドメインリソースシェアリング

インターフェイスクロスドメインの問題の解決策

corsミドルウェアを使用してクロスドメインの問題を解決する

おすすめ