关于跨域

作者: CallMeTommy | 来源:发表于2018-06-21 14:22 被阅读0次

八种方式实现跨域请求
看了这个文章,比较实用的方式就是 JSONP & cors.

  1. cors
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("Content-Type", "application/json;charset=utf-8");

在http头加上这些以后就可以跨域了。
如果你想要部分url跨域
重新设置 Access-Control-Allow-Origin

  1. jsonp

原理其实就是利用script标签是可以跨域的。
拿豆瓣的api做演示。地址 https://api.douban.com/v2/book/search?q=javascript&count=1

点击访问可以看到 json 数据. 但是script 标签是不解析JSON的。他只解析 javascript. 只要你增加 callback,
https://api.douban.com/v2/book/search?q=javascript&count=1&callback=response

var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

返回值

;handleResponse({ data: "datas" });

会调用你的方法 handleResponse
Jquery$.ajax 中的 jsonp 其实原理就是这个

  $.ajax({
     async : true,
     url : "https://api.douban.com/v2/book/search",
     type : "GET",
     dataType : "jsonp", // 返回的数据类型,设置为JSONP方式
     jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
     jsonpCallback: 'handleResponse', //设置回调函数名
     data : {
        q : "javascript", 
        count : 1
    }, 
    success: function(response, status, xhr){
        console.log('状态为:' + status + ',状态是:' + xhr.statusText);
        console.log(response);
    }
});

以上

相关文章

  • JavaScript - GET/POST及跨域方法

    xhr 原生方法请求 window fetch 方法 关于跨域 利用JSONP实现跨域调用 使用 CORS(跨域资...

  • window.URL 与 跨域

    跨域 关于跨域问题,简单来说就是通过地址访问资源时,所用的协议不同导致无法访问目标。 网上已经有很多关于跨域的主流...

  • 跨域

    关于跨域大概可以分为 iframe 的跨域和纯粹的跨全域请求。 3种跨全域方法: 1、JSONP 全称:JSON ...

  • 跨域的解决方式与演示

    关于跨域大概可以分为 iframe 的跨域和纯粹的跨全域请求。 3种跨全域方法: 1、JSONP 全称:JSON ...

  • 无标题文章

    关于axios跨域的问题

  • 跨域请求CORS

    前沿: 最近总听到同事聊跨域得问题,于是自己抽空仔细的查阅了一下关于跨域的知识。说到跨域,就得提到同源,跨域是指一...

  • vue 跨域的配置

    关于跨域的配置真是累呀 在网上找了资料 才成功实现跨域了 其实主要在vue.config.js 来配置跨域

  • 跨域与常用方案

    本文源自一次内部关于跨域的讨论分享的总结 理解跨域的重点在于:了解跨域产生的场景、原理 跨域问题只在浏览器客户端环...

  • 前端踩过的坑

    关于前端 跨域问题 大概问题 1,前端无须处理,需要在后台配置 niginx的配置 处理跨域的域名 关于布局上 ...

  • Spring Boot跨域

    前后端分离时候势必会遇到Ajax跨域请求。 1. 关于跨域 参考跨域资源共享 CORS 详解 CORS是一个W3C...

网友评论

    本文标题:关于跨域

    本文链接:https://www.haomeiwen.com/subject/arbqyftx.html