前端使用devServer解决跨域问题_devserver跨域-CSDN博客

本文链接：https://blog.csdn.net/IT_Mr_wu/article/details/106479140

本文详细介绍了在开发阶段如何解决跨域问题，主要通过使用webpack-dev-server的代理功能实现。阐述了跨域的原理，以及为什么在开发环境中会出现跨域问题。并通过实例展示了如何配置devServer的proxy，将请求转发至目标服务器，从而避免跨域限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在研发阶段很多时候需要使用到跨域，何为跨域
在这里插入图片描述开发阶段往往会遇到上面这种情况，也许将来上线后，前端项目会和后端项目部署在同一个服务器下，并不会有跨域的问题，但是由于开发时会用到webpack-dev-server,所以一定会产生跨域的问题

目前解决跨域的主要方案有以下几种：

jsonp(淘汰)
cors
http proxy

此处介绍的使用devServer解决跨域，其使用原理就是http proxy
将所有ajax请求发送给devServer服务器，在由decServer服务器做一次转发，发送给数据接口服务器
由于ajax请求是发送给devServer服务器的，所以不存在跨域，而devServer由于是用node平台发送的http请求，自然也不设计到跨域问题，可以完美解决。（只有浏览器和服务器之间才会存在跨域问题）
在这里插入图片描述
服务器代码（返回一段字符串即可）

const express = require('express')
const app = express()
// const cors = require('cors)
// app.use(cors())
app.get('/api/getUserInfo', (req, res) => {
  res.send({
    name: '黑马儿',
    age: 13
  })
});

app.listen(9999, () => {
  console.log('http://localhost:9999!');
});

前端需要配置devServer的proxy功能，在webpack.dev.js中进行配置:

devServer: {
    open: true,
    hot: true,
    compress: true,
    port: 3000,
    // contentBase: './src'
    proxy: {
      '/api': 'http://localhost:9999'
    }
  },

意为前端请求/api的url时，webpack-dev-server会将请求转发给http://localhost:9999/api处，此时如果请求地址为http://localhost:9999/api/getUserInfo,只需要写/api/getUserInfo即可，代码如下：

axios.get('/api/getUserInfo').then(result => console.log(result))