VUe 跨域访问 服务器

//创建一个vue.config.js的文件 必须是这个文件名

			module.exports = {
				    // baseURL:'/',
				    devServer: {
				        proxy: {
				            '/api': {
				                target: 'http://localhost:8888/', //对应自己的接口
				                changeOrigin: true,
				                ws: true,
				                pathRewrite: {
				                    '^/api': ''
				                }
				            }
				        }
				    }
				}

在这里插入图片描述

获取API 文件夹的接口
在这里插入图片描述

访问路径前面加上代理的API
在这里插入图片描述

### 解决 Vue3 中 Axios 请求 #### 一、部署 Axios 并全局注册 为了在 Vue3 应用中使用 Axios 进行 HTTP 请求,首先需要安装 Axios: ```bash npm install axios ``` 接着创建 `request.js` 文件来初始化 Axios 实例,并配置基础 URL 和其他默认选项。 ```javascript import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url timeout: 5000 // 请求超时时间 }); export default service; ``` 最后,在项目的入口文件 `main.js` 中全局挂载 Axios 实例以便于组件内调用[^1]。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; import request from './utils/request'; // 假设将上面的service导出为request模块 const app = createApp(App); app.config.globalProperties.$axios = request; app.mount('#app'); ``` #### 二、后端处理请求 对于问题的最佳实践是由服务器端来进行相应的 CORS 配置。以下是两种常见的做法: - **针对特定 Controller 或者 API 接口** 通过设置响应头中的 Access-Control-Allow-Origin 字段指定允许访问资源的具体名列表或通配符(*)表示接受来自任意源站的请求[^2]。 - **全局启用 CORS 支持** 如果整个应用都需要支持,则可以在 Web 框架层面统一开启 CORS 功能,比如 Spring Boot 可以借助 @CrossOrigin 注解或者自定义过滤器实现。 #### 三、前端开发环境下的临时方案 考虑到实际项目可能处于不同的生命周期阶段,在本地调试期间可以考虑采用代理的方式绕过浏览器的安全策略限制。Vite 构建工具提供了内置的支持用于简化这一过程[^4]: 编辑 vite.config.ts 文件添加 proxy 属性映射远程接口地址至本地服务路径下: ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], server: { proxy: { '/api': { target: 'https://example.com', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } } } }) ``` 这样做的好处是可以让前端开发者专注于业务逻辑而无需担心网络层面上的问题,同时也提高了安全性,因为生产环境中不会暴露真实的API位置给客户端代码[^3]。 #### 四、利用拦截器优化请求流程 为了让 POST 方法能够自动序列化表单数据,还可以进一步增强 Axios 的功能——即加入请求/响应拦截器机制。这不仅有助于减少重复劳动还能提高程序的一致性和可维护性。 ```javascript // 添加请求拦截器 service.interceptors.request.use( config => { if (config.method === 'post') { config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; config.data = qs.stringify(config.data); } return config; }, error => Promise.reject(error) ); // 添加响应拦截器 service.interceptors.response.use( response => response.data, error => Promise.reject(error) ); ``` 以上措施共同作用即可有效应对大多数场景下的挑战。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值