问题遇到的现象和发生背景
vue3，出现跨域问题，无法更改服务器，通过配置vite.config.js利用proxy设置代理，访问的目标接口是https://192.168.1.10:8143/rest/v1/app1/manager/sessions/web-verify-code/ ，控制台显示的地址是http://127.0.0.1:5173/api/rest/v1/app1/manager/sessions/web-verify-code/ ，其中api是代理接口。
代码
vite.config.js
const { defineConfig } = require('@vue/cli-service')
import vue from '@vitejs/plugin-vue';
export default defineConfig({
publicPath: '/app',
devServer: {
open:true,
assetsPublicPath: '/',
proxy: {
"/api": {
target: "https://192.168.1.10:8143",
ws: true,
changeOrigin: true,
secure: false,
pathRewrite: {
'^/api': '/', //重写,
}
},
},
host: 'localhost', //本地ip
},
plugins: [vue()]
})
BtnView.vue
<template>
<div>
<input type="button" @click="join(8058865)" value="8058865" name="mr_id">
<input type="button" @click="join(8058866)" value="8058866" name="mr_id">
<input type="button" @click="join(8058867)" value="8058867" name="mr_id">
</div>
</template>
<script>
import '../rawsdk/zjsdk2.js'
import '../js/demo_config.js'
import '../js/demo_public.js'
import '../js/demo_enterMeeting.js'
import { getUTCTime } from '../js/UTC'
import axios from 'axios'
export default {
created() {
axios.get('/rest/v1/app1/manager/sessions/web-verify-code/', {
headers: {
md5token: `2d8e9b82-5b9e-11eb-aca6-000c2953f601,4054822b-5b9e-11eb-aca6-000c2953f601,${getUTCTime()},/rest/v1/app1/manager/sessions/web-verify-code/`,
devid: '2d8e9b82-5b9e-11eb-aca6-000c2953f601',
randdtm: getUTCTime()
}//设置header信息
}).then(res => {
console.log(res)
})
},
data() {
return {
}
},
methods: {
join(id) {
var route = this.$router.resolve({
name: 'video',
})
sessionStorage.setItem("id", id);
window.open(route.href, '_blank')
},
},
}
</script>
<style scoped>
div {
display: flex;
justify-content: space-around;
align-items: center;
}
input {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: lightblue;
color: blue;
font-weight: bolder;
font-size: larger;
border-color: lightyellow;
}
</style>
运行结果及报错内容
GET http://127.0.0.1:5173/api/rest/v1/app1/manager/sessions/web-verify-code/ 404 (Not Found)
我的解答思路和尝试过的方法
首先不知道是否代理成功，控制台显示的是本地地址加上代理接口和请求的接口，并不是真正应该GET的地址。一开始我以为是代理失败了，但是在网上看到有人说这样显示其实是访问的https://192.168.1.10:8143/rest/v1/app1/manager/sessions/web-verify-code/ ，只是显示成了http://127.0.0.1:5173/api/rest/v1/app1/manager/sessions/web-verify-code/ ，其实是代理成功了。
我想要达到的结果
首先要清楚是否代理成功了，如果是成功了为什么会显示404，如果是代理失败了该如何配置才能成功代理，成功跨域。
