vue中使用axios跨域的问题

最近写了一个登录,用的axios,后端是node,跨域请求传过去404,麻烦大佬帮我看看哪里错了。

这是按钮的submit方法

   submit: function () {
  this.$http.post('/api/user/login', {
    username: this.user.username,
    password: this.user.password
  }).then((response) => {
    console.log('response.body.success=' + response.body.success)
  }).catch((error) => {
    console.log(error)
  })
}

main.js里配置如下

import axios from 'axios'
Vue.prototype.$http = axios

config.index.js中配置已经加上了

// 设置地址映射表
proxyTable: {
  '/api': {
    target: 'http://127.0.0.1:3000', // 目标地址
    changeOrigin: true,
    pathRewrite: {
      '^/api': '' // 将目标地址变成这个
    }
  }
}

dev.env.js中配置如下

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',  //开发环境
  API_HOST:"/api/"
})

prod.dev.js生产环境配置(其实我就是在本地弄得,)

module.exports = {
  NODE_ENV: '"development"',
  BASE_API: '"http://localhost:9800/"',
  API_HOST: "/api/",
  APP_ORIGIN: '"http://localhost:9800"'
}

后端node中接收请求的是user.js(node小白,所以也不知道是不是后端的问题)

router.post('/api/login', function(req, res, next) {
  res.send('respond with a resource');
});

后端的端口是3000,前端是8080
node目录如下:

clipboard.png

这是chrome上的请求情况,我也很奇怪这里为什么路径还是localhost:8080/user/login;不应该是/api/user/login吗

clipboard.png

阅读 5.4k
2 个回答

粗略扫了一眼你不是跨域问题是代理那块出了问题,不理解代理的配置就不要去动那一块了,前端的base api 直接写成本地后端服务就得了比如:http:localhost:8080,然后后端开启跨域访问。

新手上路,请多包涵

把pathRewrite删了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题