浏览器的同源策略就是协议、域名、端口都要相同,只要当前页面的协议、域名和端口与请求地址的没有完全一样就会产生跨域问题。解决方案就是在vite.config.js文件中设置一下代理就行了,具体代码如下。其中proxy属性用于配置代理的规则,/api表示需要代理的接口路径。target属性表示代理的目标服务器地址,changeOrigin属性表示...
1、config配置文件中,axios默认请求地址;改为"/api",否则还是请求环境变量中的地址; 2、vite.config.ts文件中做如下配置: server: { open: true, //启动项目自动弹出浏览器 port: 8081, //启动端口 cors: true, proxy: { "/api": { target: "http://192.168.0.128:8081", // 要访问的地址 changeOrig...
vue3发布有一段时间了,其中vite的启动速度是真的快。 现在配置跨域和服务端口等配置,可以在vite.config.js进行配置。(类似使用vue-cli的vue.config.js) vite.config.js 配置文件 import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'const{resolve}=require('path')exportdefaultdefineConfig({// 起...
1、axios配置 2、vite.config 3、后端 4、测试 三、Nginx反向代理解决跨域问题(测试、生产环境) 1、只需在nginx配置如下 2、测试 四、总结 正文 一、尝试通过配置请求头和响应头解决(跨域解决了,但session每次请求都不一致) 1、axios配置 request.interceptors.request.use(config=>{if(config.method==="get"|...
在项目根目录中找到vite.config.ts文件,配置以下代理: exportdefaultdefineConfig({server:{proxy:{'/page':{target:'http://www.baidu.com/api/',// 目标服务器地址changeOrigin:true,// 启用代理时,改变源地址headers:{"Authorization":"bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAi"//设置请求...
2、 配置 CORS 解决跨域/** * @Author:shanhua * @Package:site.shanhua.admin.auth.config * @Project:shanhuaadmin * @name:MyWebConfigurer * @Date:2024/2/5 18:59 * @Filename:MyWebConfigurer */ @Configuration public class MyWebConfigurer implements WebMvcConfigurer { @Override public void ...
② 跨域配置-代理所有/api开头的请求 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], // 代理配置 server: { proxy: { // 代理所有 /api 的请求 '/api': { ...
Vue3 vite.config.ts 配置跨域代理,请求接口404? KenOscar 1k30294483 发布于 2023-03-21 山东 vite.config.ts server: { // host: '0.0.0.0', cors: true, open:true, // 跨域配置 proxy: { '/api': { target: 'http://192.168.0.34:8888', // 后台接口地址 changeOrigin: true, rewrite: ...
vite.config.ts server: { // host: '0.0.0.0', cors: true, open:true, // 跨域配置 proxy: { '/api': { target: 'http://192.168.0.34:8888', // 后台接口地址 changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } } }, 调用 ...