vue axios 跨域问题

config 文件下的index.js代码

proxyTable: {
  '/api': {
    target: 'http://test.lhshopc.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/'
    }
  }
},


2。调取接口处

this.$http({
  baseURL:' /api',
  url:'/chygtest/admin/session/signin ',
  method:'post',



3.main.js 中

import Axios from 'axios'
Vue.prototype.$http = Axios
//允许跨域访问请求
Axios.defaults.withCredentials = true;



### 解决 Vue 中使用 Axios 请求的方法 在开发基于 Vue 的前端应用时,当通过 Axios 请求其他名下的 API 接口时会遇到浏览器同源策略限制所引发的问题。为了有效处理这一情况,可以采取如下几种方式: #### 一、服务器端设置 CORS 头部 最根本的做法是在目标服务器上配置允许来自特定或任意来源(即客户端)发出的 HTTP 请求。这通常涉及到修改 Web 应用程序所在的服务器响应头中的 `Access-Control-Allow-Origin` 字段[^1]。 #### 二、代理转发 对于本地开发环境而言,在项目根目录下创建或者编辑现有的 `vue.config.js` 文件,并添加代理规则来实现反向代理功能。这种方式能够使得所有的 `/api/*` 开始路径都被重定向到指定的目标 URL 上去,从而绕过了直接访问外部资源造成的障碍[^2]。 ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'https://example.com', // 目标API的基础URL changeOrigin: true, pathRewrite: {'^/api' : ''} } } } } ``` #### 三、利用插件简化操作 如果不想频繁地手动引入 Axios 实例,则可以通过安装并注册全局组件的方式让整个应用程序都可以方便快捷地调用 `$http` 或者自定义名称的服务对象来进行网络通信。例如,在 Vue CLI 创建的应用里可通过安装 `vue-axios` 插件完成此目的;而在 Vite 构建工具环境下则有专门针对 Vue3 版本设计好的解决方案可供选择[^3]。 ```bash npm install axios vue-axios --save ``` ```javascript import { createApp } from 'vue'; import App from './App.vue'; import axios from 'axios'; import VueAxios from 'vue-axios'; const app = createApp(App); app.use(VueAxios, axios).mount('#app'); ``` 之后便可以在任何组件内部轻松发起带有默认配置项的异步请求了: ```javascript this.$axios.post('/api/login') .then(response => { console.log('登录成功:', response.data); }) .catch(error => { console.error('发生错误:', error); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值