vue3.0 访问其他网页api跨域问题 Cross-Origin Read Blocking (CORB) blocked cross-origin response

问题描述：

因为部分原因需要调用其他网页的api，类似空气质量的信息

1、ajax 最开始的操作

$.ajax({
                type: 'GET',  // 默认值: "GET")。请求方式 ("POST" 或 "GET")
                dataType: 'jsonp',  // 预期服务器返回的数据类型:JSONP 格式
                jsonp: 'callback',  // jsonp 请求中重写回调函数的名字
                jsonpCallback: 'getName',  // jsonp 请求指定一个回调函数名
                url: 'http://113.204.xx.xx:3362/BatchDataController/getBatchAQI',  // 发送请求的地址
                // data 是发送到服务器的数据。将自动转换为请求字符串格式
                data: {},
                // 发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数
                beforeSend: (request) => {
                },
                // 请求之后调用, 传入返回后的数据，以及包含成功代码的字符串
                success: (data) => {
                    this.weatherObCq = data.data.now
                },
                // 请求出错时调用
                error: (e) => {
                    console.error("error：" + e);
                }
            })

然后就遇到了跨域的问题

 当然我也尝试着修改了dataType的格式 json、text，毫无暖用；也尝试修改header的信息，结果浏览器拒绝手动修改header的信息，厚礼蟹。

最后还是放弃了ajax。。。。。。。。。。

2、本地proxy代理

通过代理只想我们访问的api。

因为我是vue3.0,我是直接在vite.config.ts 里面配置proxy

vite.config.ts

proxy: {
        // 设置空气质量网页域名
     '/aqi': {
           target: 'http://113.204.xx.xx:3362/',
           changeOrigin: true,
           rewrite: path => path.replace(/^\/aqi/, '')
          }
     }

 具体使用

const url1 = '/aqi/BatchDataController/home';

const resp = await axios.get(url, { params: {} });

本地调试就这样就ok了，就可以成功返回信息。

 

3、nginx配置

本地调试完成部署的话，需要配置nginx，同样的配方

location ^~/api/ {
     proxy_pass  http://113.204.xx.xx:3362/;

 }　

service nginx reload 即可。