nodejs中间层/后端代理解决跨域

一、请求时跨域，无法请求

1. 在无论axios还是ajax请求时，若不是自己后端给写好的后端接口地址，其他接口地址若无该地址内部对应的配置时，浏览器请求数据是请求不到的，会发生跨域问题

2. 如前端随便请求一个网上的后端地址：

axios.get('http://is.snssdk.com/api/news/feed/v51/').then(res=>{
  console.log(res)
})

请求不到，会发生跨域

跨域报错信息

二、解决办法

可以在本地启一个nodejs服务器转接代理，前端请求本地服务器，可在自己代码中设置跨域可访问，而后端转接请求后端是没有跨域问题的（需要真实请求的地址设置可访问才可取得数据），跨域问题是浏览器的限制。

1. nodejs代码

const express = require('express')
const axios = require('axios').default  //需要npm i axios
var cors = require('cors')  //需要npm i cors

const app = express()
app.use(cors())  // 允许跨域调用
app.use(express.urlencoded({
  extended: false
}))
app.use(express.json())

// 请求对应路径
app.get('/toutiao', async (req, res) => {
   const result = await axios.get('http://is.snssdk.com/api/news/feed/v51/')
   res.send(result.data)
})

// 对所有代理请求进行封装
app.post('/proxy', async(req, res) => {
  const url = req.body.url
  const result = await axios.get(url)
  res.send(result.data)
})

app.listen(3000, () => {
  console.log(`服务器运行在3000端口`)
})

2. 前端请求代码

axios.get('http://localhost:3000/toutiao').then(res=>{
  console.log(res)
})

3. 若需要转接代理很多接口，可以封装转接，当请求 /proxy 时，即走转接路径，请求时添加请求参数url，url是真实的请求地址

$.ajax({
  type: 'post',
  data: {
    url: 'http://is.snssdk.com/api/news/feed/v51/'
  },
  success: function(res){
    console.log(res)
  }
})

以上的nodejs转接代理的代码，其他的后端代码转接代理，具体代码可能不太一样，道理是一样的。希望对你有所帮助。

详细视频讲解链接 提取码: 7rnx