1. 前言
- nodejs作为后端的语言来解决跨域还是比较方便的
- 作为前端稍微学点
nodesj,就能把前后端串联起来,形成完整的知识体系,还是非常划算的
2. 设置跨域请求头
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. 使用第三方插件
- cors
- 配合
express使用非常丝滑- 上代码 , 所有的请求都允许跨域
let express = require("express"); let cors = require("cors"); let app = express(); app.use(cors()); //请求
- 单个请求允许跨域
let cors = require("cors"); app.get('/list', cors(), function (req, res, next) { res.json({msg: '支持单个跨域'}) })
- 更多的配置可以看cors 非常简单
4. 放到服务器目录
- 跨域是因为浏览器的安全策略 同源策略
- 平常会跨域就是因为发起请求的地址和请求的地址不一样
- 所以可以把这个前端的页面放入到服务器目录,
以前只是前端不具备这个能力,但是现在会了node就有了这个能力- 用
express指定静态资源目录就行
// 指定静态资源目录 let app = express() app.use(express.static("./public")) // 可以指定多个 app.use(express.static("./public2")) app.get('/list', function (req, res, next) { res.json({msg: '支持单个跨域'}) })
- 放到这个服务器目录下 域名也省了
- 域名会自动拼接当前域名的,本来线上代码其实也就这样
// 外面有 async包裹 // 域名会自动拼接当前域名的 let res = await fetch("/list").then(res => res.json()) console.log("post 结果:", res)
5. 后端代理
- 如果是自己的项目想要使用第三方服务比如百度地图, 会跨域(虽然可以使用jsonp,但是这只是取巧利用漏洞而已,早晚会被填上)
- 后端代理 配置
// 配置代理 百度地图 地点检索 app.use("/baidu",createProxyMiddleware({ target:"http://api.map.baidu.com", changeOrigin:true, pathRewrite:{ "^/baidu":"" } }))
- 前端发起请求
let getATM = async () => { let res = await fetch(`/baidu/place/v2/search?query=ATM%E6%9C%BA&tag=%E9%93%B6%E8%A1%8C®ion=%E5%8C%97%E4%BA%AC&output=json&ak=自己的ak`).then(res => res.json()) console.log("百度:", res) }
