ajax 跨域的几种方式

时间：2022-11-11 19:55:15

网络上跨域的文章大多一样，这里我写下，巩固下自己的知识，顺便做个记录

什么是跨域

这里简单拿百度的网址做个例子：http://www.baidu.com:80 (默认都是80端口、可省略)

http 协议

www 子域名

baidu 主域名

80 端口号

总结：协议、子域名、主域名、端口，其中一个不一致的都称为跨域

jsonp 跨域

在网页中，我们会使用一些cdn图片、cdn资源，他们和我们的页面都不在一个域内，但是他们却可以使用，聪明的程序员使用src 可引入外部资源，实现了跨域的需求。

在页面中定义js函数，通过script 标签的src引入要请求的接口(这就是jsonp的原理)，接口中调用js函数，传入json 数据。我这里写了一个简单的例子

<!DOCTYPE html>

<html>

<head>

    <title>jsonp 跨域</title>

</head>

<body>

    <div id="ajax-wrap">通过ajax请求来改变这里的内容</div>

    <script type="text/javascript">

        // 定义jsonp 函数

        function jsonp(json){

            setTimeout(function(){

                var box = document.getElementById('ajax-wrap');

                box.innerHTML = json.code;

            },3000);

        }

        // 添加script 标签

        function appendScript(url){

            var script = document.createElement('script');

            script.setAttribute('src',url);

            document.body.appendChild(s

            cript);

        }

        appendScript('http://test2.com');

    </script>

</body>

</html>
// 服务器端代码

<?php

    echo 'jsonp({

        "code": "CA1998",

        "price": 1780,

        "tickets": 5

    })';

?>

jQuery jsonp 跨域

<!DOCTYPE html>

<html>

<head>

    <title>test</title>

</head>

<body>

    <div id="ajax-wrap">通过ajax请求来改变这里的内容</div>

    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">

        // 定义jsonp 函数

        function jsonpp(json){

                var box = document.getElementById('ajax-wrap');

                box.innerHTML = json.code;

        }

        jQuery(document).ready(function(){

            $.ajax({

                 type: "get",

                 url: "http://test2.com",

                 dataType: "jsonp",

                 jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

                 // jsonpCallback:"jsonpp",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据,如果这里有写的话，success 可以不用处理

                 success: function(json){

                    // console.log(json);

                    jsonpp(json);

                 },

                 error: function(xhr){

                    console.log(xhr);

                 }

             });

         });

    </script>

</body>

</html>

有些时候，我们在拿到一些公共接口，使用jsonp方式调用接口时、无法使用，应该是接口没有做jsonp的处理

3，CORS 跨域

CORS 是一个W3C标准，全称跨域资源共享(Cross-origin resource sharing)。最初，是在1995年、由网景公司首先加入浏览器的，主要用于互联网跨域访问的安全。跨域资源共享需要浏览器和服务器同时支持，貌似跟ajax没有什么关系。

当我们的ajax请求是跨域请求时，会在请求头信息中，添加一个origin 字段，告诉服务器这个请求来自哪个源。服务器接收到这个字段后，决定是否同意这次请求

// 指定允许其他域名访问  (这个最重要，参数为* 表示任何域名都可以访问，一版设置为请求头信息中的 origin字段)

header('Access-Control-Allow-Origin: http://test.com');

// 响应类型  ()

header('Access-Control-Allow-Methods:POST');

// 响应头设置

header('Access-Control-Allow-Headers:x-requested-with,content-type');

这里我只写一个简单的例子

<!DOCTYPE html>

<html>

<head>

    <title>test</title>

</head>

<body>

    <div id="ajax-wrap">通过ajax请求来改变这里的内容</div>

    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">

        jQuery(document).ready(function(){

            $.ajax({

                 type: "get",

                 url: "http://test2.com?name=xiami",

                 dataType: "json",

                 success: function(json){

                    console.log(json);

                 },

                 error: function(xhr){

                    console.log(xhr);

                 }

             });

         });

    </script>

</body>

</html>
// php 代码

<?php

// 指定允许其他域名访问

header('Access-Control-Allow-Origin: http://test.com');

// 响应类型

header('Access-Control-Allow-Methods:POST');

// 响应头设置

header('Access-Control-Allow-Headers:x-requested-with,content-type'); 

echo '{

    "code": "CA1998",

    "price": ' .$name.',

    "tickets": 5

}';

cors兼容 IE10及以上版本， 更多细节，通过下面的参考网址，进行详细查看

参考网址

说说JSON和JSONP，也许你会豁然开朗

XHR2 了解

浏览器同源策略及规避方法

跨域资源共享 CORS 详解

HTTP访问控制(CORS)

ajax 跨域的几种方式的更多相关文章

  1. ajax处理跨域有几种方式

    一.什么是跨域 同源策略是由Netscape提出的著名安全策略,是浏览器最核心.基本的安全功能,它限制了一个源(origin)中加载文本或者脚本与来自其他源(origin)中资源的交互方式,所谓的同源 ...

  2. php跨域的几种方式

    PHP实现跨域的几种形式 1.JSONP(JSON with padding)原理 利用html里面script标签可以加载其他域下的js这一特性,使用script src的形式来获取其他域下的数据, ...

  3. JQuery的Ajax跨域请求的解决方式

            今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究 ...

  4. Ajax跨域的几种方法以及每种方法的原理

    js中几种实用的跨域方法原理详解 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协 ...

  5. 深入浅出：了解jsonp跨域的九种方式

    什么是“”跨域”: 跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.由于安全原因,跨域访问是被各大浏览器所默认禁止的.当一个域与其他域建立了信 ...

  6. Ajax 跨域的几种解决方案

    作者:黄轩链接:http://www.zhihu.com/question/19618769/answer/38934786来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处 ...

  7. 跨域的几种方式以及call&lpar;&rpar;，apply&lpar;&rpar; bind&lpar;&rpar;方法的作用和区别

    jsonp: jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议. 一个是描述信息的格式,一个是信息传递 ...

  8. Springboot设置跨域的三种方式

    方式一(精细配置) 在需要跨域的整个Controller或者单个方法上添加@CrossOrigin注解 方式二(全局配置) @Configuration public class WebMvcConf ...

  9. SpringBoot设置跨域的几种方式

    什么是跨域? 浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 原因: 由于浏览器的同源策略, 即a网站只能访问a网站的内容,不能访问b网站的内容. 注意: 跨域问题 ...

随机推荐

  1. Android pull解析xml文件

    本文介绍android中使用pull来解析xml文件 先自己写一个xml文件,存一些天气信息 <?xml version="1.0" encoding="UTF-8 ...

  2. 【USACO】

    Among the large Wisconsin cattle ranchers, it is customary to brand cows with serial numbers to plea ...

  3. 基于jquery的侧边栏分享导航

    今天给大家分享一款基于jquery的侧边栏分享导航.这款分享钮一直固定于左侧,鼠标经过的时候凸出显示,这款分享按钮适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  4. STL的pair学习&comma; map学习

    http://blog.csdn.net/calvin_zcx/article/details/6072286 http://www.linuxidc.com/Linux/2014-10/107621 ...

  5. PHP技术开发微信公众平台

    这篇文章主要介绍了微信公众平台的两种模式(编辑模式和开发模式)顾名思义编辑模式就是写普通的功能,开发模式具有更多的功能,下面主要是针对开发模式做介绍,需要的朋友可以参考下 下面通过图文并茂的方式介绍微 ...

  6. API和DLL

    API API(Application Programming Interface,应用编程接口)其实就是操作系统留给应用程序的一个调用接口,应用程序通过调用操作系统的 API 而使操作系统去执行应用 ...

  7. Linux的起源、特点和版本号

    前言 最近上陈渝老师的<高级操作系统>,需要在ucore实验平台上完成一个麻雀虽小五脏俱全的OS,本着看过一小半<30天自制操作系统>的自信,以为这不过是小case,怎料被虐得 ...

  8. git 回退各种场景操作

    在git的一般使用中,如果发现错误的将不想提交的文件add进入index之后,想回退取消,则可以使用命令:git reset HEAD <file>...,同时git add完毕之后,gi ...

  9. pandas模块实现小爬虫功能-转载

    pandas模块实现小爬虫功能 安装 pip3 install pandas 爬虫代码 import pandas as pd df = pd.read_html("http://www.a ...

  10. Code Generation &equals;&gt&semi; Table -&gt&semi; Class for DataGridView use

    Generate a class from table defintion and simplify databinding process.

相关文章