cors

どうして舞台に上がるのか

以前はサーバ上にクライアントと呼ばれるファイルがあり、ユーザがサーバに要求すると、ユーザはサーバ上のクライアントを受信し、クライアントでサーバと通信したり、クライアントに静的に格納されたデータをユーザが一方的に表示したりしていた.したがって、サーバから取り外したクライアントは、Originがサーバから送信され、サーバに父親としての再要求を要求するため、サーバに危害を及ぼすことは間違いありません.ソースが同じであるため、サーバがこのリクエストをブロックする理由はありません.こうして通信が行われた.しかし最近singlepageアプリケーションというアプリケーションが登場しました.Webアプリケーションのアップグレードに伴い、以前のサーバやYouTube apiを使用してクライアントから取得したような他のサーバからのリソースを必要とする複雑なWebアプリケーションが増えています.クライアントから同じoriginにリソースを要求することも以前は可能でしたが、同じソースではなく異なるソースを要求する必要があります.これをクロスソースリクエストと呼び、corsは実際にはクロスソースリソース共有と呼ぶ.これは、同じoriginではない別のoriginでは、例えばrizenfからyoutubeにこのような方法で他のサーバで使用されるリソースリソースを要求するには、crossorigin要求が必要であることを意味する.しかし、mdnで検索すると、ブラウザはセキュリティ上の理由でソース間リクエストを制限します.これは私がサーバーから降りたクライアントではないので、私たちのサーバーに何か要求を出します.セキュリティ上の理由でcrossoriginリクエストは最初からブロックされています.リクエストを開くと、サーバに作成するリソースが特定されないためです.しかし、開発者はブラウザ会社にcross-domain要求を発行して、これらのWebアプリケーションの性能をさらに向上させるように要求したため、サーバは許可された範囲内でcrossorigin要求の変更を行い、現在印刷時

これらのdefaultCorsHeadersというコードが表示されます.
このコードは、get、post、put、delete、optionsのみを許可するすべてのドメインからサーバにドメイン間リクエストを発行するorigin->*(すべてのoriginで可能)へのアクセスを許可する最初の方法です.また、ヘッダにはcontent-typeとacceptしか書けず、preflightリクエストは10秒まで許可されます.
これらの条件を備えたリクエストは、ドメイン間でリソースリクエストを許可する設定コードである.
サーバがnaverであればcomと呼ばれるoriginリクエストcross-domainのみが許可されている場合、naver.comは、最初にoptionsというpreflightリクエストでcors originのリクエスト情報をサーバに確認し、ブラウザが自動的にoptionsというリクエストをサーバに送信し、cross-originリクエストのライセンスを取得し、本格的なpostリクエストでcross-originリクエストを行います.
したがって,optionsを簡単に要約するとpreflight requestである.ブラウザでは、クライアントが別のソースのサーバにリクエストを自動的に要求すると、実際にnaverクライアントはpostリクエストを介してサーバにタイトル条件を持つpostリクエストを発行したいと考えています.この場合、ブラウザはまずoptionsメソッドを使用してサーバにリクエストを発行します.私は方法でPOST要求を出して、あなたたちのサーバーにこれを許可しますかと聞いて、今サーバーはnaverです.comというソースの送信が許可されているため、サーバにリソースリクエストを送信し、オプションの正常な応答を再送信し、クライアントで設定したPOSTリクエストをサーバに送信することでリソースを生成することができます.現在、サーバはnaverです.com、匿名のみが許可されると仮定します.comからサーバにリソースリクエストを送信すると、ソースリストがないため、サーバに拒否応答を送信すると、サーバにリソースリクエストを送信できません.optionsはpreflight requestと略称します.mdnドキュメントを参照し、cors mdnドキュメントを参照して、この方法の意図を理解してください.

miniNodeServer

const http = require('http');

const server = http.createServer((request, response) => {
  const { method, url, headers } = request;

  // 작업진행

  if (method === 'POST' && url === '/lower') {
    let body = [];
    request
      .on('data', chunk => {
        body.push(chunk);
      })
      .on('end', () => {
        body = Buffer.concat(body).toString();

        console.log('너는 POST /lower를 요청했구나');

        response.writeHead(200, corsHeader);
        response.end(body.toLowerCase());
        return;
      });
  } else if (method === 'POST' && url === '/upper') {
    let body = [];
    request
      .on('data', chunk => {
        body.push(chunk);
      })
      .on('end', () => {
        body = Buffer.concat(body).toString();

        console.log('너는 POST /upper를 요청했구나');

        response.writeHead(200, corsHeader);
        response.end(body.toUpperCase());
        return;
      });
  } else if (method === 'OPTIONS') {
    console.log('너는 preflight request를 보냈구나');
    response.writeHead(200, corsHeader);
    response.end();
  } else {
    console.log(method, url);
    console.log('너는 다른 요청을 보냈구나');
  }
});

server.listen(5000);

let corsHeader = {
  'access-control-allow-origin': '*',
  'access-control-allow-methods': 'POST',
  'access-control-allow-headers': 'Content-Type',
  'access-control-allow-max-age': 86400,
};

エラーコード

const express = require('express');
const bodyParser = require('body-parser');
const jsonParser = bodyParser.text();
const cors = require('cors');
const PORT = 5500;  

const myLogger = (req, res, next) => {
  console.log(`http request method is ${req.method}, url is ${req.url} `);
  next();
};

const app = express();
app.use(cors());
app.use(myLogger);
app.use((req, res, next) => {
  // 토큰 있니? 없으면 받아줄 수 없어!
  if (req.headers.token) {
    req.isLoggedIn = true;
    next();
  } else {
    res.status(400).send('invalid user');
  }
});

app.post('/upper', jsonParser, (req, res) => {
  res.status(200).send(req.body.toUpperCase());
});

app.post('/lower', jsonParser, (req, res) => {
  res.status(200).send(req.body.toLowerCase());
});

app.get('/', jsonParser, (req, res) => {
  res.send('HELLO');
});

app.listen(PORT, () => {
  console.log(`Server is listening : http://localhost:${PORT}`);
});