跨域Ajax方法

VioletJack 发布于2019-07-01 11:13 / 3436人阅读

摘要：原文来自跨域方法小博客经典示例原生方式做有意义的事发生错误做有意义的事发生错误跨域方案方案前端请求页面做有意义的事发生错误后端响应页面注意后端响应是方案服务端添加响应头信息以下不支持允许所有来源访问允许访问的方式终极方案后端代理

原文来自 -- 跨域Ajax方法 – Eson小博客 uninote

经典Ajax示例：

XMLHttpRequest原生方式

var request = new XMLHttpRequest();
request.open("POST", "index.php");
var data = "parameter1" + encodeURIComponent(parameter_one) + "¶meter2" + encodeURIComponent(parameter_two);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange = function() {
    if (request.readyState===4) {
        if (request.status===200) {
            var ret = request.responseText;
            //做有意义的事

        } else {
            alert("发生错误：" + request.status);
        }
    }
}

jQuery

$.ajax({
    type:"POST",
    url:"index.php",
    dataType:"json",
    data:{
        "parameter1":parameter_one,
        "parameter2":parameter_two
    },
    success:function(ret){
        //做有意义的事

    },
    error:function(jqXHR){
        if (jqXHR.status!=200) {
            alert("发生错误：" + jqXHR.status);
        }
    }
});

跨域Ajax方案： 方案A：JSONP

前端请求页面：

$.ajax({
    type:"POST",
    url:"http://127.0.0.1/test/Ajax_jsonp/service.php",
    dataType:"jsonp",
    jsonp:"jsonp",
    data:{
        "parameter1":parameter_one,
        "parameter2":parameter_two
    },
    success:function(ret){
        //做有意义的事
        alert(JSON.stringify(ret));
        console.log(ret);
    },
    error:function(jqXHR){
        if (jqXHR.status!=200) {
            alert("发生错误：" + jqXHR.status);
        }
    }
});

后端响应页面：

注意后端响应是GET

方案B：XHR2服务端添加响应头信息（IE10以下不支持）

header("Access-Control-Allow-Origin:*");//允许所有来源访问
header("Access-Control-Allow-Method:POST,GET");//允许访问的方式

终极方案：后端代理

curl

云服务器 GPU云服务器 ajax跨域 jquery ajax 跨域 ajax跨域访问 php 跨域ajax

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/29985.html

ajax跨域，这应该是最全的解决方案了

摘要：关于，强烈推荐阅读跨域资源共享详解阮一峰另外，这里也整理了一个实现原理图简化版如何判断是否是简单请求浏览器将请求分成两类简单请求和非简单请求。前言从刚接触前端开发起，跨域这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过N个跨域相关的问题了，16年时也整理过一篇相关文章，但是感觉还是差了点什么，于是现在重新梳理了一下。个人见识有限，如有差错，请多多见谅，欢迎提出iss...

ytwman 2019-08-22 11:21 评论0 收藏0
20K前端大佬面试(关于如何回答ajax跨域问题)

摘要：在接触前端开发起，跨域这个词就一直以很高的频率在我们学习工作中重复出现，最近在工作中遇到了跨域的相关问题，这里我把它总结记录一下。在接触前端开发起，跨域这个词就一直以很高的频率在我们学习工作中重复出现，最近在工作中遇到了跨域的相关问题，这里我把它总结记录一下。关于跨域，有N种类型，现在我只专注于ajax请求跨域(ajax跨域只是属于浏览器同源策略中的一部分,其它的这里不做介绍)，内容...

Yangyang 2019-08-02 16:09 评论0 收藏0
Ajax跨域

摘要：发布自的博客，欢迎大家转载，但是要注意注明出处。另外，该文章收纳在的个人的知识整理仓库，欢迎投稿跨域简介常用跨域方法跨域简介所谓跨域指的是请求从其他的域获取数据或者传输数据所谓域同源，指的是两个服务器资源的根的域名端口协议三者完全相同，只要发布自Kindem的博客，欢迎大家转载，但是要注意注明出处。另外，该文章收纳在Kindem的个人的 IT 知识整理仓库，欢迎 Star、Fork、...

xiaotianyi 2019-08-23 11:36 评论0 收藏0
再也不学AJAX了！（三）跨域获取资源 ② - JSONP & CORS

摘要：浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用跨域请求资源时，同源策略又会成为开发者的阻碍。我们之前提到过，如果想要绕过浏览器同源策略，实现使用技术跨域获取资源，需要服务端和客户端的协同合作。浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用AJAX跨域请求资源时，同源策略又会成为开发者的阻碍。在本文中，我们会简单介绍需...

enda 2019-08-21 17:55 评论0 收藏0
慕课网_《Ajax跨域完全讲解》学习总结

摘要：时间年月日星期三说明本文部分内容均来自慕课网。当预检请求通过的时候，才发送真正的请求。时间：2018年04月18日星期三说明：本文部分内容均来自慕课网。@慕课网：https://www.imooc.com教学源码：https://github.com/zccodere/s...学习源码：https://github.com/zccodere/s... 第一章：课程介绍 1-1 课程介...

fredshare 2019-08-15 15:34 评论0 收藏0