使用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，多个时用逗号隔开”