axios实现跨域的两种方式及代码

axios实现跨域的两种方式及代码

在使用 Axios 发起跨域请求时,可以通过以下两种方式来解决:

1.服务端配置 CORS(跨域资源共享)

需要在服务器端设置响应头,允许指定的域名或者所有域名访问该接口。

示例 Node.js 代码:

const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors()) // 允许所有域名访问

app.get('/api/data', (req, res) => {
  res.json({
    message: 'Hello World!'
  })
})

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000')
})

2、在前端配置代理

在开发环境中,可以通过配置代理将请求发送到本地的服务器,从而避免跨域问题。

示例 Vue.js 配置:

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 代理目标地址
        changeOrigin: true, // 开启代理服务器
        pathRewrite: {
          '^/api': '' // 重写请求地址,去掉 '/api' 前缀
        }
      }
    }
  }
}

在 Axios 中发送请求时,只需要将请求地址改为代理服务器的地址即可。

示例 Axios 代码:

axios.get('/api/data').then(response => {
  console.log(response.data)
})

以上是两种常用的跨域解决方案,具体的实现方式还需要根据项目的实际情况来选择。

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发
程序员吾非同的头像-程序员知识精选

昵称

取消
昵称表情代码图片