快捷導(dǎo)航

Node express 官方示例cors跨域解析

更新時(shí)間：2023年08月22日 10:31:34 作者：頭像 fishenal

這篇文章主要為大家介紹了Node express 官方示例cors跨域解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

node express

最近學(xué)習(xí)node以及express，看例子看的頭疼，剛看完cors，寫一下記錄下來。

index.js

var express = require('../..');
var logger = require('morgan');
var app = express();
var bodyParser = require('body-parser');
var api = express();

首先創(chuàng)建了兩個(gè)應(yīng)用，一個(gè)是用戶訪問的app（客戶端），另外一個(gè)是api作為請(qǐng)求的接口。

// app middleware

app.use(express.static(__dirname + '/public'));

// api middleware

api.use(logger('dev'));
api.use(bodyParser.json());

把a(bǔ)pp指向public目錄

一些中間件，把a(bǔ)pp指向public目錄，使用log，body解析為json。

/**
 * CORS support.
 */

api.all('*', function(req, res, next){
  if (!req.get('Origin')) return next();
  // use "*" here to accept any origin
  res.set('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.set('Access-Control-Allow-Methods', 'PUT');
  res.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');
  // res.set('Access-Control-Allow-Max-Age', 3600);
  if ('OPTIONS' == req.method) return res.send(200);
  next();
});

這里我的理解是 api應(yīng)對(duì)目錄的請(qǐng)求，響應(yīng)的時(shí)候進(jìn)行限制，比如來自3000端口，PUT方式，然后執(zhí)行next

/**
 * PUT an existing user.
 */
api.put('/user/:id', function(req, res){
  console.log('req.body'+req.body);
   console.log(req.body);
  res.send(204);
});
app.listen(3000);
api.listen(3001);
console.log('app listening on 3000');
console.log('api listening on 3001');

最后針對(duì)指定目錄下的put訪問，console出請(qǐng)求體。

public目錄下的index.html

var req = new XMLHttpRequest;
  req.open('PUT', 'http://localhost:3001/user/1', false);
  req.setRequestHeader('Content-Type', 'application/json');
  req.send('{"name":"tobi","species":"ferret"}');
  console.log(req.responseText);

創(chuàng)建一個(gè)http請(qǐng)求，初始化一個(gè)put請(qǐng)求，向3001(也就是api應(yīng)用)下的user/1,發(fā)送了一串json，完畢