vue项目访问后台接口跨域问题

Question

问题描述

vue项目 axios请求后台接口，用webpack代理解决跨域问题，报404

问题出现的环境背景及自己尝试过哪些方法

vue项目基于 vue-admin-tempalte搭建
webpack 4.x
vue 2.0

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
config/index.js文件

proxyTable: {
    '/api': {
        target: 'http://127.0.0.1:9000',
        pathRewrite: {'^/api' : ''}
    }
}

config/dev.env.js文件
（此文件为模板写法，用vue-admin-tempalte的小伙伴可参考，此问题中可忽略）

module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    BASE_API: '"/"'
})

api请求文件

export function fetchList() {
    return request({
        url: '/api/deeplearning/test',
        method: 'get'
    })
}

实际看到的错误信息又是什么？

从api请求中可以看到，url为 /api/deeplearning/test，通过proxyTable设置可以完成代理转发，
将去掉前缀 /api 从而重写url，目前在浏览器中F12看到的请求 为
http://localhost:8080/deeplearning/test/，8080是我的vue项目端口，其中已经过滤掉了/api，说明已经走了proxyTable配置，但是依然报 404，而后端接口可以正常访问，
访问地址为http://127.0.0.1:9000/deeplearning/test/，现在疑问有：
1.在这种已经实现url重写的情况下还可能是代理配置的问题吗？
2.如果代理配置没问题，那么该如何定位这个问题呢，是否和axios有关？

期待感谢大家解惑 ！

Answer 1

配置代理 重新run dev一下 好吧

Answer 2

你和后台是一个局域网的话,先ping一下他的ip,看看通不通,再把你那个请求的路径放到浏览器直接打开,报405接口是通的,跨域是他后台没有设置请求头,报403是网关没穿透,需后台设置,还报404的话是他的ip根本不通,配置完代理记得重启项目