vue3跨越

在vue3项目中使用跨域

1.服务器代理

server: {
    port: 8080, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    cors: true, // 允许跨域
    // 设置代理，根据我们项目实际情况配置
    proxy: {
      '/api': { //apiTest是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会进到代理来
        target: 'https://xxxxxx/', // 需要代理的域名
        changeOrigin: true, // 是否跨域
        rewrite: (path) => path.replace('/api', '') //重写匹配的字段，如果不需要放在请求路径上，可以重写为""
      },
      '/img': {
        target: 'https://xxxxxx/',
        changeOrigin: true, //用于控制请求头中的host值
        rewrite: (path) => path.replace('/img', '')
      },
    }
  },

2.jsonp

const initScript = (setting) => {
    // var frame = document.createElement("script");
    // frame.src = "http://127.0.0.1:3333/api/list?callback=callbacklocation";
    // document.body.append(frame);
    setting.data = setting.data || {};
    setting.key = setting.key || "callback";
    setting.callback = setting.callback || function () { };
    setting.data[setting.key] = "callbacklocation";
    window.callbacklocation = function (data) {
        setting.callback(data);
    };

    var script = document.createElement("script");
    var query = [];
    for (var key in setting.data) {
        query.push(key + "=" + encodeURIComponent(setting.data[key]));
    }
    script.src = setting.url + "?" + query.join("&");
    document.head.appendChild(script);
    document.head.removeChild(script);
};

//使用方法
initScript({
    url: 'https://xxxxxx',
    key: 'callback',
    callback: function (res) {
        console.log(res)
    }
});