概念:

什么是跨域?

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。所谓同源是指,域名,协议,端口均相同。
http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)
http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)
http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)
http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)
请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。
浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。

解决方案:

方法一:使用jsonp

前端代码:

    $.ajax({
        url : 'XXXXXXX',
        type : 'get',
        dataType : 'jsonp',
        jsonp : 'jsonpCallback', //成功回调,如果不设置,默认返回callback,后端需要返回此方法,比如Java写法如下
        success : function (data) {
            console.log(data);
        },
        error : function (error) {
            console.log(error);
        }
    })


后端代码(以Java为例):

        public string ProcessCallback(string name, string email)
    {
        if (Request.QueryString != null)
        {
            string jsonpCallback = Request.QueryString["jsonpcallback"];
            var user = new User
            {
                Name = name,
                Email = email
            };
            // jsonpCallback 对应前端的jsonp: 'jsonpCallback'中的jsonpCallback,如果没设置,默认callback
            return jsonpCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";
        }

        return "error";
    }

方法二:利用CORS(跨域资源共享)

前端代码:

服务器代码:

服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。

使用该方式的特点:

与前jsonp方式相比,前端代码和未处理跨域前一样,即普通的ajax请求,但服务器代码添加了一段解决跨域的代码

PS:

cors高级使用:

在springmvc中配置拦截器,创建跨域拦截器实现HandlerInterceptor接口,并实现其方法,在请求处理前设置头信息,并放行


在springmvc的配置文件中配置拦截器,注意拦截的是所有的文件


例子:

vue项目跨域举例:

首先需要配置config下的index.js中的proxyTable,配置如下:

  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    proxyTable: {
      '/api': {
        target: 'http://happymmall.com',// 请换成你需要跨域请求的地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
解释: proxyTable中的pathRewrite的/api理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用

'http://hayypmmall.com/product/list.do?keyword=手机'这个接口,则换成'/api/procuct/list.do?keyword=手机'即可。


以下为发送该请求时,axios的代码:代码中baseURL为'/api',url为'product/list.do?keyword=手机',合起来就是'/api/procuct/list.do?keyword=手机',

由于我们在config中的index.js设置了代理,则请求地址实际为'http://hayypmmall.com/product/list.do?keyword=手机'

axios({
        method: 'get',
        baseURL: '/api',
        url: 'product/list.do?keyword=手机'
      }).then(
        res => {
          console.log(res.data.data.list[0].name);
        }
      ).catch(
        err => {
          console.log(err);
        }
      );
运行结果为:



此时网络请求中也可看到成功的请求:



然而这只是解决了开发环境下的跨域,npm run build出来后的dist代码,放到服务器中运行,还是会存在跨域问题,比如网上的这位伙伴,问题如下,相信大家也是遇到这个问题(开发环境下的跨域解决了,但是生产环境中的跨域还是没有解决)。

以下为图片:


以上为图片


许多有经验的伙伴在问题下纷纷贡献上解决办法,其中一位800多声望值的伙伴回答如下:

以下为图片:


以上为图片。

也就是问题又重新回归到了上边介绍的跨域方法二:利用CORS



如果上线时前后端部署到同源下的话,这时只需要解决开发时的跨域,部署上线后,由于是同源,不存在跨域问题;这种情况下,本人使用的是mac下的charles,一款代理软件,轻松解决开发环境下的跨域问题;Windows下相同功能的有Fiddler。


Logo

前往低代码交流专区

更多推荐