前端使用devServer解决跨域问题

在研发阶段很多时候需要使用到跨域,何为跨域开发阶段往往会遇到上面这种情况,也许将来上线后,前端项目会和后端项目部署在同一个服务器下,并不会有跨域的问题

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

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

  1. jsonp(淘汰)
  2. cors
  3. 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))

发布者:admin,转转请注明出处:http://www.yc00.com/web/1754941712a5218255.html

相关推荐

  • 前端使用devServer解决跨域问题

    在研发阶段很多时候需要使用到跨域,何为跨域开发阶段往往会遇到上面这种情况,也许将来上线后,前端项目会和后端项目部署在同一个服务器下,并不会有跨域的问题

    1月前
    280

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信