node学习-5 跨域解决

十七、跨域原理

跨域原因就是由于ajax同源策略，协议，主机（ip,域名），端口号三者保持一致。

十八、解决跨域问题

• 解决跨域就要保证协议，主机，端口号一致。
• 因此，使用静态资源目录去访问别的东西就不存在跨域问题。

解决跨域常用的方法：

1、cors（前后端配合）

• 在node服务中express提供了一个中间件，cors插件安装之后使用app.use(cors()),就完成了后端跨域的配置。其原理就是设置头文件信息，使用插件就不用自己设置了，不使用插件需要自己手动设置，使用插件方法如下：

• yarn add cors //安装
  

• var express = require('express')
  var cors = require('cors')
  var app = express()
  
  app.use(cors())
  

• cors官网使用说明

不使用插件，自己设置跨域

• 设置允许所有域名跨域，其中app.all表示所有请求，都要经过all来处理。

app.all("*",function(req,res,next){
    //设置允许跨域的域名，*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin","*");
    //允许的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.send(200);  //让options尝试请求快速结束
    else
        next();
}

• 设置允许指定域名“http://www.zhangqling.com”跨域

app.all("*",function(req,res,next){
    //设置允许跨域的域名，*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin","http://www.zhangqling.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.send(200);  //让options尝试请求快速结束
    else
        next();
}

• 设置设置允许多个域名跨域

app.all("*",function(req,res,next){
    if( req.headers.origin.toLowerCase() == "http://www.zhangsan.com"
        || req.headers.origin.toLowerCase() =="http://127.0.0.1" ) {
        //设置允许跨域的域名，*代表允许任意域名跨域
        res.header("Access-Control-Allow-Origin", req.headers.origin);
    }
    //允许的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.send(200);  //让options尝试请求快速结束
    else
        next();    
}

• 设置 如果允许的域名较多，可以将允许跨域的域名放到数组当中：

  app.all("*",function(req,res,next){
      var orginList=[
          "http://www.zhangsan.com",
          "http://www.alibaba.com",
          "http://www.qq.com",
          "http://www.baidu.com"
      ]
      if(orginList.includes(req.headers.origin.toLowerCase())){
          //设置允许跨域的域名，*代表允许任意域名跨域
          res.header("Access-Control-Allow-Origin",req.headers.origin);
      }
      //允许的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.send(200);  //让options尝试请求快速结束
      else
          next();
  }
  
  

2、jsonp（前后端配合）

3、代理（前端完成）

• 原理，服务器请求服务器是没有跨域问题的，就像node爬虫，是通过express构建服务器，获取别的网站的数据。
• 实现方式： 通过点击自己服务请求，让自己服务器发起请求别的服务器数据，可以在node中使用http.get来请求，也可以使用插件request来快速发起请求。

// 跨域处理
app.get('/cors', (req, res)=>{
  // 请求自己服务器的内容
  request('http://www.baidu.com', (err, response, body)=>{
    // 经过服务器请求服务器越过ajax请求，从而实现代理，避免了跨域
    if(!err){
      res.send(body);
    }
  })
})