使用Vue解决跨域问题

vue2_2">vue2解决跨域问题

1.创建vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    proxy: {
      '/api': {
        target: '域名地址', //接口域名
        changeOrigin: true, //是否跨域
        pathRewrite: {
          //路径重置
          '^/api': ''
        }
      }
    }
  }
})
2.request.js中
const service = axios.create({
  baseURL: '/',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})
3.封装的请求中
import request from '@/utils/request'
// 获取个人信息接口
export function getUserInfo(data) {
  return request({
    url: '/api/getInfo',
    method: 'post',
    data
  })
}

vue3_42">vue3解决跨域问题

1.创建vite.config.js
import vue from '@vitejs/plugin-vue'

module.exports = {
    base: './',
    plugins: [vue()],
    optimizeDeps: {
        include: ['schart.js']
    },
    server: {
        host: '0.0.0.0',
        port: 3000,//更改启动端⼝
        // 反向代理
        proxy: {
            '/api': {
                target: '域名url',//代理的地址
                changeOrigin: true,
                pathRewrite:{
                    '^/api':''
                }
            }
        }
    }
}
2.request.js中
const service = axios.create({
    baseURL: '/',
    timeout: 5000,
    headers: {
        'Content-Type': 'application/xml'
      }
});

3.封装的请求中
import request from '@/utils/request'
// 获取个人信息接口
export const commAPI = data => {
    return request({
        url: '/api/getInfo',
        method: 'post',
        data: data
    });
};