CORS 跨域资源共享

跨域–非同源策略请求
协议 域名 端口号 三者都一样是同源 有一个不同就是跨域

使用 axios.js 请求…的前端处理

1. npm install axios
2. 新建一个html页面
3. 在该页面引入axios 然后发起请求

axios.get('http://localhost:8001/').then(result=>{
    console.log(result)
})

后端处理

我写了两个端口 一个用于http服务 一个作为端口服务

let express = require('express')

// 8000 端口服务 作为当前目录http服务
let app = express()
app.use(express.static(__dirname))
app.listen(8000)

// 8001 端口的服务 返回数据
var app2 = express();
app2.listen(8001,()=>{
    console.log('okk')
})

app2.get('/',(req,res)=>{
    res.send('获取成功')
})

终端 输入 node server 启动服务
在浏览器控制台 出现报错

处理跨域
正常在端口的下面加入
res.header("Access-Control-Allow-Headers","*")
便能解决
这里我把所有的写在一起

var allowCrossDomain = (req,res,next)=>{
    // 控制请求源 
    res.header("Access-Control-Allow-Origin","*"); //res.header("Access-Control-Allow-Origin","http://localhost:8000");
    res.header("Access-Control-Allow-Credentials",true);
    // 请求头 带token
    res.header("Access-Control-Allow-Headers","*") //res.header("Access-Control-Allow-Headers","Content-Type,Content-Length,Authorization,Accept,X-Requested-With")
    // 允许请求的方法 get post put del
    res.header("Access-Control-Allow-Methods","*") //res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,HEAD,OPTIONS")
    if(req.method === 'OPTIONS'){
      res.send('ok');
      return;
    }
    next()
}
app2.use(allowCrossDomain)

重启服务

在浏览器便能看到正确的数据

*表示支持多源 不允许携带cookie 要携带cookie就只能写一个源

其他跨域方式:

JSONP和JQuery实现跨域

http proxy 代理