feat: 前端配置代理解决上传跨域问题
- 配置 Vite 开发服务器代理 /api 和 /uploads 到后端 - API baseURL 改为相对路径 '/api' - 修改上传 action 为相对路径 '/api/upload/image' - 移除后端 FileUploadController 的 @CrossOrigin 注解 - 恢复 WebMvcConfig 的拦截器配置
This commit is contained in:
Binary file not shown.
Binary file not shown.
@@ -1,7 +1,7 @@
|
|||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
|
||||||
const http = axios.create({
|
const http = axios.create({
|
||||||
baseURL: 'http://localhost:8080',
|
baseURL: '/api',
|
||||||
timeout: 10000
|
timeout: 10000
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -90,7 +90,7 @@ const banners = ref([])
|
|||||||
const bannerModalVisible = ref(false)
|
const bannerModalVisible = ref(false)
|
||||||
const bannerForm = reactive({ id: null, imageUrl: '', linkUrl: '', sortNo: 1, enabled: true })
|
const bannerForm = reactive({ id: null, imageUrl: '', linkUrl: '', sortNo: 1, enabled: true })
|
||||||
|
|
||||||
const uploadAction = 'http://localhost:8080/api/upload/image'
|
const uploadAction = '/api/upload/image'
|
||||||
const uploadHeaders = computed(() => ({
|
const uploadHeaders = computed(() => ({
|
||||||
'X-Token': localStorage.getItem('token') || ''
|
'X-Token': localStorage.getItem('token') || ''
|
||||||
}))
|
}))
|
||||||
|
|||||||
@@ -126,7 +126,7 @@ const merchantOptions = ref([])
|
|||||||
const productModalVisible = ref(false)
|
const productModalVisible = ref(false)
|
||||||
const productForm = reactive({ id: null, name: '', category: '', description: '', price: 0, stock: 0, imageUrl: '', merchantId: null, approved: false })
|
const productForm = reactive({ id: null, name: '', category: '', description: '', price: 0, stock: 0, imageUrl: '', merchantId: null, approved: false })
|
||||||
|
|
||||||
const uploadAction = 'http://localhost:8080/api/upload/image'
|
const uploadAction = '/api/upload/image'
|
||||||
const uploadHeaders = computed(() => ({
|
const uploadHeaders = computed(() => ({
|
||||||
'X-Token': localStorage.getItem('token') || ''
|
'X-Token': localStorage.getItem('token') || ''
|
||||||
}))
|
}))
|
||||||
|
|||||||
@@ -110,7 +110,7 @@ const products = ref([])
|
|||||||
const productModalVisible = ref(false)
|
const productModalVisible = ref(false)
|
||||||
const productForm = reactive({ id: null, name: '', category: '', description: '', price: 0, stock: 0, imageUrl: '', approved: false })
|
const productForm = reactive({ id: null, name: '', category: '', description: '', price: 0, stock: 0, imageUrl: '', approved: false })
|
||||||
|
|
||||||
const uploadAction = 'http://localhost:8080/api/upload/image'
|
const uploadAction = '/api/upload/image'
|
||||||
const uploadHeaders = computed(() => ({
|
const uploadHeaders = computed(() => ({
|
||||||
'X-Token': localStorage.getItem('token') || ''
|
'X-Token': localStorage.getItem('token') || ''
|
||||||
}))
|
}))
|
||||||
|
|||||||
@@ -4,6 +4,18 @@ import vue from '@vitejs/plugin-vue'
|
|||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue()],
|
plugins: [vue()],
|
||||||
server: {
|
server: {
|
||||||
port: 5173
|
port: 5173,
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://localhost:8080',
|
||||||
|
changeOrigin: true,
|
||||||
|
secure: false
|
||||||
|
},
|
||||||
|
'/uploads': {
|
||||||
|
target: 'http://localhost:8080',
|
||||||
|
changeOrigin: true,
|
||||||
|
secure: false
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user