Vue axios 本地请求跨域访问的问题

首先在项目中安装http-proxy-middleware中间件作为代理

npm i http-proxy-middleware -D

在config/index.js中配置代理proxyTable

module.exports = {
  dev: {
    proxyTable: {
      '/proxy': {
        target: 'http://ip.taobao.com',   // 需要请求的地址
        changeOrigin: true,  // 是否跨域
        pathRewrite: {
          '^/proxy': '/'  // 替换target中的请求地址,也就是说,在请求的时候,url用'/proxy'代替'http://ip.taobao.com'
        }
      }
    }
}

使用示例

    apiGet() {
      axios
        // 这里用'/proxy'代替了baseUrl 
        .get("/proxy/service/getIpInfo.php", {
          params: {
            ip: ""
          }
        })
        .then(result => {
          console.log(result);
        })
        .catch(err => {});
    }
### 配置 Vue2 项目使用 Axios 解决双问题Vue2 项目中,当前端服务部署在一个名下(如 `http://a.example.com`),而后端 API 分布在两个不同的名上(如 `http://b.example.com` 和 `http://c.example.com`)时,浏览器的同源策略会阻止这些请求。为了解决这一问题,可以通过 Webpack DevServer 的代理机制和 Axios请求配置来实现开发环境下的访问。 #### 使用 Webpack DevServer 配置多代理路径 Webpack 提供了 `devServer.proxy` 功能,允许将特定路径的请求代理到不同的目标服务器上。这种方式可以绕过浏览器的限制,使得前端开发者在本地环境中像访问同源资源一样调用远程 API。 以下是一个典型的 `vue.config.js` 配置示例: ```javascript module.exports = { devServer: { proxy: { '/api1': { target: 'http://b.example.com', changeOrigin: true, pathRewrite: { '^/api1': '' } }, '/api2': { target: 'http://c.example.com', changeOrigin: true, pathRewrite: { '^/api2': '' } } } } } ``` 上述配置表示: - 所有以 `/api1` 开头的请求会被代理到 `http://b.example.com`。 - 所有以 `/api2` 开头的请求会被代理到 `http://c.example.com` [^5]。 这样即使后端接口分布在多个不同名下,也可以通过多个代理规则进行处理,确保开发阶段顺利进行调试。 #### 在 Vue 组件中使用 Axios 发起请求 Axios 是一个广泛使用的 HTTP 客户端,支持异步请求,并且与 Vue 框架集成良好。在配置好代理之后,可以直接使用 Axios 调用接口,而无需关心实际的目标名。 例如,在 Vue 组件中发起请求的方式如下: ```javascript import axios from 'axios' export default { created() { this.fetchDataFromB() this.fetchDataFromC() }, methods: { fetchDataFromB() { axios.get('/api1/user/profile').then(response => { console.log('Response from b.example.com:', response.data) }).catch(error => { console.error('Error fetching data from b.example.com:', error) }) }, fetchDataFromC() { axios.get('/api2/settings/list').then(response => { console.log('Response from c.example.com:', response.data) }).catch(error => { console.error('Error fetching data from c.example.com:', error) }) } } } ``` 由于代理是在开发服务器上完成的,因此浏览器看到的请求来源仍然是 `localhost:8080`(默认端口),从而避免了问题 [^4]。 #### 生产环境解决方案 在生产环境中,Webpack DevServer 的代理功能不再适用。为了应对多问题,推荐采用以下方式: 1. **Nginx 反向代理** 将所有 API 请求通过 Nginx 统一代理到对应的后端服务,使得前端页面与后端接口看起来“同源”。这种方式不仅解决了问题,还能提高性能并增强安全性。 2. **后端启用 CORS 策略** 后端服务应在响应头中添加适当的 CORS 相关字段,如 `Access-Control-Allow-Origin`、`Access-Control-Allow-Credentials` 等,以允许来自指定名的请求 [^2]。 3. **携带 Cookie 的请求注意事项** 如果需要在请求中携带 Cookie,则必须同时满足以下条件: - 后端响应头中包含 `Access-Control-Allow-Credentials: true`。 - 前端请求设置 `withCredentials: true` [^3]。 例如,在 Axios 中可如下配置: ```javascript axios.get('/api1/user/profile', { withCredentials: true }) ``` 此外,`Access-Control-Allow-Origin` 不能设置为通配符 `*`,而应明确指定允许访问的源地址 [^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

果冻豆人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值