一、什么是跨域

在这里插入图片描述
协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。

如何处理跨域问题

1、 JSONP

JSONP实现跨域请求的原理简单的说,就是动态创建script标签,然后利用script的src 不受同源策略约束来跨域获取数据。
jsonp由两部分组成:回调函数和数据。
回调函数: 回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。
数据:数据就是传入回调函数中的 JSON 数据。

动态创建script标签,设置其src,回调函数在src中设置:

var script = document.createElement("script");
script.src = "http://vueshop.glbuys.com/api/order/list";
document.body.insertBefore(script, document.body.firstChild);

在页面中,返回的JSON作为参数传入回调函数中,我们通过回调函数来来操作数据。

function handleResponse(response){
    // 对response数据进行操作代码
}

2、 jquery跨域

			$.ajax({
                async : true,
                url : "http://vueshop.glbuys.com/api/order/list",
                type : "GET",
                dataType : "jsonp", // 返回的数据类型,设置为JSONP方式
                jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
                jsonpCallback: 'handleResponse', //设置回调函数名
                success: function(response){
                    console.log(response);
                }
            });

Jquery到底能不能实现跨域POST

jquery自身的功能是不支持的,但是你可以基于jquery实现跨域post。
jquery本身只支持jsonp跨域,但是jsonp的原理限制了只能支持get。
如果想要实现原生jquery跨域,在你的请求地址的head里面加上Access-Control-Allow-Origin,值设置成调用该API的域名(或者*),优点是代码修改少,前端js代码无需任何改动。
或者用iframe + window.name方式,比较麻烦,后端前端都要改,优点是兼容性强。
或者用postMessage,优点是方便,缺点IE支持的不是很好。

3、proxy代理

找到你的config文件下的index.js文件进行配置跨域代理。

// 配置多个代理
      proxy: {
        "/api": {
          target: "http://vueshop.glbuys.com/api/order/list", // 本地模拟数据服务器
          ws:true,
          changeOrigin: true,
          pathRewrite: {
            "^/api": "" // 去掉接口地址中的api字符串
          }
        }
      }

如果你使用的是vue-cli3的话就需要手动去配置vue.config.js。

Logo

前往低代码交流专区

更多推荐