在 Vue 3.0 + Vite + Axios 中，如果接口請(qǐng)求的地址與前端代碼不在同一域下，就會(huì)出現(xiàn)跨域問(wèn)題。這種情況下，可以采取以下幾種簡(jiǎn)單的解決辦法：
一、使用代理
在 Vite 的配置文件中，可以通過(guò) proxy 選項(xiàng)來(lái)配置代理，使得前端代碼與接口請(qǐng)求在同一域下。例如：
// vite.config.js
export default {
// ...
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
}
在這個(gè)例子中，將所有以 /api 開(kāi)頭的請(qǐng)求代理到 ??http://localhost:3000??，同時(shí)需要設(shè)置 changeOrigin 為 true，表示更改源地址，這樣才能避免跨域問(wèn)題。
二、設(shè)置 CORS
如果你無(wú)法使用代理，也可以在接口的響應(yīng)頭中設(shè)置 CORS（跨域資源共享）。在后端代碼中設(shè)置Access-Control-Allow-Origin 和其他相關(guān)的響應(yīng)頭，以允許跨域請(qǐng)求。例如，在 Node.js 中可以這樣設(shè)置：
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
next();
});三、使用 JSONP
JSONP 是一種跨域解決方案，可以通過(guò)添加一個(gè) <script> 標(biāo)簽來(lái)發(fā)送跨域請(qǐng)求。在 Vue 3.0 + Axios 中，可以使用 axios-jsonp 插件來(lái)實(shí)現(xiàn) JSONP 跨域。例如：
import axiosJsonp from 'axios-jsonp';
axios({
url: 'http://example.com/api',
adapter: axiosJsonp,
}).then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
這里通過(guò)設(shè)置 adapter 選項(xiàng)來(lái)指定使用 axios-jsonp 插件，然后使用 axios 發(fā)送請(qǐng)求即可。
四、使用跨域資源共享插件
如果你無(wú)法在后端代碼中設(shè)置 CORS，也可以使用跨域資源共享插件來(lái)解決跨域問(wèn)題。例如，在 Vue 3.0 + Axios 中，可以使用 cors 和 cors-anywhere 等插件。例如：
import axios from 'axios';
import cors from 'cors-anywhere';
const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
const apiUrl = 'http://example.com/api';
const axiosInstance = axios.create({
baseURL: proxyUrl + apiUrl,
});
cors.createServer().listen(8080, () => {
console.log('CORS Anywhere server running on port 8080');
});
axiosInstance.get('/data').then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
這里通過(guò)在前端代碼中創(chuàng)建一個(gè)跨域資源共享服務(wù)器，并將接口請(qǐng)求通過(guò)代理轉(zhuǎn)發(fā)到這個(gè)服務(wù)器，從而避免了跨域問(wèn)題。這種方案需要在前端代碼和后端代碼中都進(jìn)行修改，可能會(huì)比較麻煩，不過(guò)如果其他方案都無(wú)法使用的時(shí)候，可以考慮使用這種方案。
五、在接口服務(wù)器中添加 CORS 配置
如果你有權(quán)限修改接口服務(wù)器的配置，也可以在服務(wù)器中添加 CORS 配置來(lái)解決跨域問(wèn)題。具體的配置方式因服務(wù)器不同而異，可以參考服務(wù)器的文檔進(jìn)行配置。例如，在 Nginx 中可以這樣配置：
location /api {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'Content-Type';
proxy_pass http://example.com/api;
}這里將所有以 /api 開(kāi)頭的請(qǐng)求代理到 http://example.com/api，并在響應(yīng)頭中添加 CORS 相關(guān)的配置。
