nodejs 跨域CORS 学习

来源：互联网发布：mysql 存储引擎编辑：程序博客网时间：2024/05/29 17:15

文章参考
http://www.ruanyifeng.com/blog/2016/04/cors.html

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

（1）Access-Control-Allow-Origin
该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

（2）Access-Control-Request-Method
该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。

（3）Access-Control-Expose-Headers
该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。

启动nodejs web应用的app.js

var express = require("express");var http = require("http");var app = express();var router = express.Router();var testRouter =  require('./routes/test/test');app.use('/test', testRouter);http.createServer(app).listen(3000);

处理具体api的控制器 test.js

var express = require('express');var router = express.Router();/* GET home page. */router.get('/', function(req, res, next) {  res.render('index', { name: 'Express 路由1' });});/* GET home page. */router.get('/cors', function(req, res, next) {  res.render('test/index', { name: 'Express 路由1' });});/* GET home page. */router.get('/getData', function(req, res, next) {  //设置允许跨域请求  var reqOrigin = req.header("origin");  if(reqOrigin !=undefined && reqOrigin.indexOf("http://localhost:3000") > -1){  //设置允许 http://localhost:3000 这个域响应    res.header("Access-Control-Allow-Origin", "http://localhost:3000");    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");    res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");  }  res.json(200, {name:"张三1",age:40});});module.exports = router;

模板页面，发送ajax跨域请求

<!DOCTYPE html><html lang="zh-CN"><head>    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <script src="../public/js/jquery.min.js"></script>    <script src="../public/js/hb_common.js"></script>    <link rel="stylesheet" href="../public/css/bootstrap.min.css">    <link rel="stylesheet" href="../public/css/hb_wap.css">    <title>test</title></head><body ><button class="btn btn-primary" id="btn" onclick="corsGetData()">cors跨域获取数据</button><br><button class="btn btn-primary" id="btn4" onclick="getData()">不跨域获取数据</button><br></body><script>    function getData(){        $.ajax({            url: "http://localhost:3000/test/getData",            type:"GET",            cache: false,            success: function(html){                alert(html);                $("#results").append(html);            }        })    }    function corsGetData(){        $.ajax({            url: "http://www.huangbiao.com:3000/test/getData",            type:"GET",            cache: false,            success: function(html){                alert(html);                $("#results").append(html);            }        })    }</script></html>

0 0