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

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

原创最新推荐文章于 2024-10-18 19:04:12 发布 · 453 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

编程基础专栏收录该内容

9 篇文章

订阅专栏

该博客介绍项目采用前端Vue、后端SpringBoot架构。提及前端请求后端服务路径，强调配置代理时的注意事项，还可通过起python的http服务验证端口转发，并给出vue配置代理、配置后端接口路径及调用方法的示例。

部署运行你感兴趣的模型镜像

本项目前端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}`)
			})
    }