Vue3项目使用第三方API报跨域请求错误Access to XMLHttpRequest at ‘*‘ from origin ‘*‘ has been blocked by CORS policy

最近在使用第三方API获取当前所在城市时报跨域请求错误，解决方案跟大家分享一下！

 

使用的第三方接口信息如下：

接口地址：http://pv.sohu.com/cityjson?ie=utf-8

解决方案：

1、在配置文件中配置反向代理proxy，我的配置文件是vite.config.js

  // 反向代理
  proxy: {
    '/getCurrentCityName': {
      target: 'http://pv.sohu.com/cityjson', //目标URL,即本次要使用的第三方API
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
 }

2、使用代理

 ​​​​​

注意：get为我封装好的axios方法 

get方法如下：

import axios from 'axios'

// 封装请求方式
// @param url 接口地址
// @param data 携带参数
// get请求
export function get (url, data) {
  return axios.get(url, data)
}

跨域请求报错问题得以解决！