做前端这几年，最烦的不是写逻辑，而是调接口。尤其是刚起步的时候，那个跨域报错简直让人头大。红彤彤的一片，看着就心慌。

我是老张，在建站这行摸爬滚打7年了。今天不整那些虚的，直接说怎么解决 vue本地访问服务器跨域 这个问题。很多新人朋友，一遇到跨域就慌，觉得是服务器配置错了，其实大部分时候，是你本地开发环境没配好。

先说个最笨但最有效的办法。改 vue.config.js。

很多教程说要在 nginx 或者 apache 里配 proxy，那是上线后的事。本地开发，咱们直接用 vue-cli 自带的 devServer 就行。

打开你的项目根目录，找到 vue.config.js 这个文件。如果没有，就新建一个。

在里面加这么几行代码：

module.exports = {

devServer: {

proxy: {

'/api': {

target: 'http://你的服务器IP:端口',

changeOrigin: true,

pathRewrite: {

'^/api': ''

}

}

}

}

}

注意看，target 那里填的是你后端服务的真实地址。changeOrigin 一定要设为 true，不然有些服务器会校验 Host 头，直接给你拒了。pathRewrite 是把请求路径里的 /api 去掉，因为后端接口通常不带这个前缀。

这招对解决 vue本地访问服务器跨域 特别管用，基本上90%的情况都能搞定。

但是，有时候你会遇到一种情况。后端没给你配好，或者你懒得改配置。这时候怎么办？

有个野路子，叫 JSONP。不过现在很少用了，因为只支持 GET 请求。如果你的接口是 POST，那就歇菜吧。

还有一种情况，后端大神比较忙，没空给你改 CORS 头。这时候你可以试试在本地起一个中间层。比如用 nginx 做个反向代理。

在本地装个 nginx，配置一下 location /api/ { proxy_pass http://后端地址; }。

这样浏览器请求的是本地 nginx，同源，没有跨域。nginx 再去请求后端服务器。

这招稍微复杂点，适合那些对部署有要求的朋友。对于刚入门的，我还是推荐第一种改 vue.config.js 的方法。简单，快捷，不用装额外软件。

我见过太多人，为了一个跨域问题，折腾半天。甚至去改浏览器的启动参数，禁用安全策略。千万别这么干！那是饮鸩止渴。

你想想，你以后要是把项目交给别人，或者部署到测试环境，浏览器安全策略是关不掉的。所以，必须走正规途径。

正规途径就是后端配合，或者前端代理。

这里有个数据对比。用代理的方式，请求延迟大概在 10-20ms 左右，因为多了一次转发。直接跨域（如果后端开了 CORS），延迟几乎为零。

但是，为了开发体验，这点延迟完全可以接受。毕竟开发阶段，稳定性比那几毫秒重要得多。

另外，提醒一下，改完配置，一定要重启服务！

别以为改了文件就自动生效了。很多时候，你改了 vue.config.js，没重启 dev server，结果还是报错。这时候你会怀疑人生，觉得是不是代码写错了。

其实，只是缓存或者进程没更新而已。

Ctrl+C 杀掉进程，然后 npm run serve 重新跑一遍。

这时候，再去请求接口，你会发现，世界清静了。

还有一种小坑，就是端口问题。

如果你的后端端口是 8080，而 vue 默认也是 8080，那就冲突了。

这时候，你要改 vue 的端口，或者改后端的端口。

在 package.json 里，可以指定端口：

"scripts": {

"serve": "vue-cli-service serve --port 3000"

}

这样 vue 就跑在 3000 端口了，后端跑在 8080，互不干扰。

记住，vue本地访问服务器跨域 的核心思路就是：让浏览器觉得你是同源的。

要么后端开 CORS，要么前端做代理。

别整那些花里胡哨的插件，原生配置最靠谱。

最后，说句心里话。

做开发，心态要稳。

遇到报错，先冷静。

看控制台，看 Network 面板。

请求发出去了吗？状态码是多少？

如果是 404，那是路径错了。

如果是 403，那是权限或者跨域。

如果是 500，那是后端炸了。

别一报错就骂娘，那是解决问题的开始。

希望这篇笔记能帮到你。

如果你还有其他问题，欢迎在评论区留言。

咱们一起交流，一起进步。

毕竟，建站这条路，一个人走太孤单，一群人走才热闹。

加油，前端人！

本文关键词：vue本地访问服务器跨域