1. 前言

1. nodejs作为后端的语言来解决跨域还是比较方便的
2. 作为前端稍微学点 nodesj,就能把前后端串联起来,形成完整的知识体系,还是非常划算的

---

2. 设置跨域请求头

1. res.setHeader("Access-Control-Allow-Origin","*");

app.all("*",function(req,res,next){
    // 相当于域名白名单, 不能写 * ,因为*是通配符 所有网站都可以访问 自己为了玩 用着 也行
    // 不是本公司网站也能访问 ,那就扯了
    res.setHeader("Access-Control-Allow-Origin","*");
    // 所以可以单独配置白名单,也就是能进行跨域访问的网址
    // res.setHeader("Access-Control-Allow-Origin",["http://127.0.0.1:5500"]);

    //...Headers必须的固定值,"content-type"
    res.setHeader("Access-Control-Allow-Headers","X-request-With,content-type");
    // res.setHeader("Access-Control-Allow-Headers","X-request-With");

    res.setHeader("Access-Control-Allow-Methods","GET,POST,DELETE,PUT,OPTIONS")
    
    // 放行/下一步 不能省
    next()
})

---

3. 使用第三方插件

1. cors
2. 配合 express使用非常丝滑
3. 上代码 , 所有的请求都允许跨域

let express = require("express");
let cors = require("cors");

let app = express();

app.use(cors());
//请求

4. 单个请求允许跨域

let cors = require("cors");
app.get('/list', cors(), function (req, res, next) {
  res.json({msg: '支持单个跨域'})
})

5. 更多的配置可以看cors 非常简单

---

4. 放到服务器目录

1. 跨域是因为浏览器的安全策略 同源策略
2. 平常会跨域就是因为发起请求的地址和请求的地址不一样
3. 所以可以把这个前端的页面放入到服务器目录,
   以前只是前端不具备这个能力,但是现在会了 node就有了这个能力
4. 用express 指定静态资源目录就行

// 指定静态资源目录
let app = express()
app.use(express.static("./public"))
// 可以指定多个
app.use(express.static("./public2"))
app.get('/list',  function (req, res, next) {
  res.json({msg: '支持单个跨域'})
})

5. 放到这个服务器目录下 域名也省了
6. 域名会自动拼接当前域名的,本来线上代码其实也就这样

// 外面有 async包裹
// 域名会自动拼接当前域名的
let res = await fetch("/list").then(res => res.json())
    console.log("post 结果:", res)

---

5. 后端代理

1. 如果是自己的项目想要使用第三方服务比如百度地图, 会跨域(虽然可以使用jsonp,但是这只是取巧利用漏洞而已,早晚会被填上)
2. 后端代理 配置

// 配置代理  百度地图 地点检索
app.use("/baidu",createProxyMiddleware({
    target:"http://api.map.baidu.com",
    changeOrigin:true,
    pathRewrite:{
        "^/baidu":""
    }
}))

3. 前端发起请求

  let getATM = async () => {
            let res = await fetch(`/baidu/place/v2/search?query=ATM%E6%9C%BA&tag=%E9%93%B6%E8%A1%8C&region=%E5%8C%97%E4%BA%AC&output=json&ak=自己的ak`).then(res => res.json())
            console.log("百度:", res)
        }

---

参考资料

cors
nodejs代理

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉