使用vue 实现跨域访问第三方http请求

 

目录

 

1、需要配置vue的拦截器vue.config,js

2、引用 axios

3、被请求端需要设置允许跨域


1、需要配置vue的拦截器vue.config,js

代码如下:

const path = require('path')

const  url = 'http://127.0.0.1:19043/'

module.exports = {

  dev: {

    // Paths

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    proxyTable: {

      '/aa/bb': { // 前端 包含/aa/bb 的请求就被拦截

        target:  url, // 拦截后的目标url

        changeOrigin: true, // 是否跨域 当前设为跨域

        // secure: true,

        pathRewrite: {

          '^/aa/bb': '' // 会对匹配到的请求做重写,

        }

      }

      }

    },

2、引用 axios

npm install axios

import axios from 'axios';
 
// 创建axios实例
const instance = axios.create({
  baseURL: 'http://127.0.0.1:19043/aa/bb', // 目标服务器的URL
  timeout: 1000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
    'Custom-Header': 'your-custom-value' // 你想设置的header
  }
});
 
// 发送请求
instance.get('/someEndpoint')
  .then(response => {
    // 处理响应
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

3、被请求端需要设置允许跨域

Access-Control-Allow-Origin:*
Access-Control-Allow-Methods:"POST, GET, OPTIONS, DELETE"
Access-Control-Request-Headers: “自己定义的hear,多个时用逗号隔开”

Vue前端项目中,如果需要访问第三方API而遇到问题,通常有几种常见的解决方案: 1. **JSONP (JSON with Padding)**: 这种方式适合于GET请求,利用script标签可以加载JSON数据。你需要在后端设置相应支持,返回一个格式如`<script>alert('success');</script>`,然后前端通过动态插入script标签解析其中的数据。 2. **CORS (Cross-Origin Resource Sharing)**: 对于现代浏览器,允许服务器设置Access-Control-Allow-Origin头来启用。在服务端设置响应头,指定允许的名或'*'通配符表示所有名。客户端的Vue应用发送Ajax请求时,会自动处理CORS。 3. **代理设置**(Proxy in Vue CLI): 使用Vue CLI构建的项目可以在配置文件`vue.config.js`中设置proxy,将所有的非同源请求转发到特定的地址,比如: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://third-party-api.com', // 第三方API的URL changeOrigin: true, pathRewrite: { '^/api': '' } // 如果有路径前缀,需要修改这里 } } } } ``` 4. **Nginx 或其他反向代理**:对于生产环境,可以考虑在服务器层面使用Nginx等工具做反向代理。 5. **Postman 或者 Axios 的全局拦截器**: 如果是在开发工具中遇到,也可以在Postman的预处理器或Axios的config里添加头。 注意:上述方法可能受服务器、浏览器安全策略以及API本身的限制,不是所有情况都通用。在实际操作时,建议先尝试配置后端支持,再选择合适的前端解决方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

慧香一格

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

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

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

打赏作者

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

抵扣说明:

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

余额充值