本机启动前后端分离项目遇到的跨域问题-404

最新推荐文章于 2024-10-18 19:04:12 发布

wxmgcs

最新推荐文章于 2024-10-18 19:04:12 发布

阅读量396

点赞数

分类专栏：编程基础文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/wxm6614/article/details/129339516

版权

编程基础专栏收录该内容

9 篇文章

订阅专栏

本项目前端Vue ，后端SpringBoot。

前端请求后端服务的路径: http://localhost:10007/api/pd/login,在配置代理时需注意多添加/api，否则会出现常见的404问题，可以起一个python的http服务来验证端口的转发.

python -m http.server 10007

举例说明

vue配置的代理

module.exports = {
  devServer: {
    host: "0.0.0.0",
    port: 8081,
    proxy: {
      '/api': {
        target: `http://localhost:10007`,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/' 
        }
      },
    }
  }
}

配置后端接口路径

let baseUrl = ''
let host = 'https://xxx.xxx/'
switch (process.env.NODE_ENV) {
    case 'development': // 测试
        baseUrl = '/api/api/pd'// 关键: /api/+后端真实请求路
        break
    case 'production'://正式
        baseUrl = host + 'api/pd'
        break
}
export { baseUrl, host }

调用方法

    login(){
      var url = this.$baseUrl+"login"
      var data = {}
      this.$http
			.post(url, data )
			.then((res) => {
				console.log(res)
			})
			.catch((err) => {
				console.log(`${err}`)
			})
    }