vue-cli3.0中axios请求跨域问题，有效！！！Uncaught (in promise) Error: Request failed with status code 404

た入场券 2022-12-14 13:36 219阅读 0赞

一开始未设置时如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70_pic_center]

以及报错如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70_pic_center 1]

## 解决办法： ##

1.在你的项目的根目录里面的vue.config.js文件添加如下内容（没有这个文件直接新建即可）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70_pic_center 2]  
\*内容：

module.exports = { 
    	publicPath: './',
    	productionSourceMap: false,
    	devServer: { 
    		proxy: { 
    			'/test': { 
    				target: "https://188.62.63",//这个是你要访问的接口地址
    				changeOrigin: true,
    				pathRewrite: { //重写地址 比如说 你的接口地址是'https://188.62.63/xxyy/getUser' 你请求得时候地址只需要写'/test/getUser'
    					'/test': '/xxyy'  
    				}
    			}
    		}
    	}
    }

2.回到你要请求接口的页面中去，像下面这样写：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70_pic_center 3]  
3.记得！记得！记得！要重启项目再试一下

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/d625b067d4af479f82c9b2d24c4ddc66.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/bd7a02ff006d43559a2836772848840c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/81475f4006d643d4a106978ea66399d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/57443587cdd64ef2a774c3565b7c507c.png