Vue项目跨域解决指南

wangming
Vue
29天前
17热度

一、跨域到底是个啥？

咱们先打个比方：你家小区的门禁系统规定，只有住在同一栋楼（协议）、同一单元（主机）、同一楼层（端口）的人才能自由进出，这就是浏览器的"同源策略"——最核心的安全守卫。要是你想找隔壁小区（非同源）的朋友玩，门禁就会拦着你，这就是跨域啦！

不过要注意哦，跨域是浏览器的限制。用抓包工具能看到接口明明返回了数据，可浏览器就是不让前端拿；用Postman也能正常请求到数据，这都说明问题出在浏览器的"小脾气"上～

二、Vue项目里的跨域解法

解决跨域的方法有JSONP、CORS、Proxy等，但Vue项目里最常用的是CORS和Proxy，咱们重点唠这俩！

1. CORS：服务器说"允许访问"

CORS（跨域资源共享）就像给服务器装了个"访客名单"，通过HTTP头告诉浏览器："这些地址可以来访问我"。后端只要加几个响应头，就能轻松解决跨域。

以Koa框架为例，加段中间件就行：

<code>app.use(async (ctx,next)=>{</code><code> ctx.set("Access-Control-Allow-Origin","*");</code><code> ctx.set(</code><code>"Access-Control-Allow-Headers",</code><code>"Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild",</code><code>);</code><code> ctx.set("Access-Control-Allow-Methods","PUT, POST, GET, DELETE, OPTIONS");</code><code>if(ctx.method =="OPTIONS"){</code><code> ctx.body =200;</code><code>}else{</code><code> await next();</code><code>}</code><code>});</code>Code language: HTML, XML (xml)

不过要注意，生产环境别用'*'（谁都能访问），得改成具体的目标host，不然等于没设门禁～

2. Proxy：找个"中间人"帮忙

Proxy就是找个"中间人"转发请求，前端先把请求发给代理服务器，代理再转给目标服务器，拿到数据后再转回来。Vue项目里常用这三种方式：

「方案一：Vue-cli本地代理」 用vue-cli搭建的项目，在vue.config.js里配代理：

<code>module.exports ={</code><code> devServer:{</code><code> proxy:{</code><code>"/api":{</code><code> target:"http://xxx.xxx.xx.xx:8080",</code><code> changeOrigin:true,</code><code> pathRewrite:{"^/api":""},</code><code>},</code><code>},</code><code>},</code><code>};</code>Code language: HTML, XML (xml)

然后axios请求时把baseURL设为'/api'就行～不过要注意，上线后如果前端和接口服务器不在一起，还得再配代理哦！

「方案二：服务端代理（Express版）」 用Express的话，装个http-proxy-middleware：

<code>var express =require("express");</code><code>const proxy =require("http-proxy-middleware");</code><code>const app = express();</code><code>app.use(</code><code>"/api",</code><code> proxy({ target:"http://localhost:4000", changeOrigin:false}),</code><code>);</code><code>module.exports = app;</code>Code language: HTML, XML (xml)

轻松实现请求转发～

「方案三：Nginx代理」 上线后可以用Nginx做代理，在配置文件里加段：

<code>server {</code><code> location /api {</code><code> proxy_pass http://127.0.0.1:3000;</code><code> proxy_set_header Host $host;</code><code> proxy_set_header X-Real-IP $remote_addr;</code><code>}</code><code>}</code>Code language: HTML, XML (xml)

这样前端请求/api就会自动转到目标服务器啦！