将不确定变为确定~开发人员应该明确知道跨域Post的问题

注意:这里的跨域指不到同一域名下,包括一级与二级域名,这里也认为不在同域下

从A网站把信息以Post的方式发送到B网站,这种过程叫做跨域POST,相类的,A网站把B网站的信息获取回来,一般称为跨域GET请求,而对于后者可以通过异步方式实现,在jq里封装了jsonp,用它来实现异步跨域请求;而异步跨域POST是不可以被实现的,下面我们通过实例来说明。

一 异步跨域

JS代码用来实现跨域GET和跨域POST,代码如下:(从www.post.com域名下访问二级域成file.post.com)

<script type="text/javascript">
    $.ajax({
        type: "GET",
        dataType: "jsonp",
        url: "http://file.post.com/Home/GetInfo",
        success: function (data) {
            alert(data);
        }
    })

    $("#btnsubmit").click(function () {
        alert("操作...");
        $.ajax({
            type: "POST",
            url: "http://file.post.com/home/create2",
            data: { commentTitle: $("#CommentTitle").val(), commentInfo: $("#CommentInfo").val() },
            success: function (data) {
                alert(data);
            }
        })
    });
</script>

表单如下:

<fieldset>
    <legend>Product_Comment</legend>
    <div class="editor-label">
        @Html.LabelFor(model => model.ProductID)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.ProductID)
        @Html.ValidationMessageFor(model => model.ProductID)
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.UserID)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.UserID)
        @Html.ValidationMessageFor(model => model.UserID)
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.CommentTitle)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.CommentTitle)
        @Html.ValidationMessageFor(model => model.CommentTitle)
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.CommentInfo)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.CommentInfo)
        @Html.ValidationMessageFor(model => model.CommentInfo)
    </div>
    <p>
        <input type="button" value="Create" id="btnsubmit" />
    </p>
</fieldset>

当加载页面后,通过firebug可以看到,使用jsonp的GET请求,返回了正确的信息:

而请求异步表单提交后,数据库里并没有记录,就是说异步不支持跨域POST

二 同步跨域

我们将表单按钮类型改为submit,让表单同步提交到其它域中

通过实验表明,同步表单的POST操作是可以的,当然这是正常的,向淘宝的支付接口也是通过同步POST来实现的,呵呵!

数据库中的信息如下:

恩,现在您应该对跨域POST有一个明确的认识了吧,对于同步表单POST,没有任何问题,而异步的POST,则受到了限制,无论是二级域名还是其它域名都不能进行POST请求的!

感谢您的阅读!

时间: 2024-10-13 01:52:57

将不确定变为确定~开发人员应该明确知道跨域Post的问题的相关文章

处理前端人员提出的接口跨域问题

手机端调用接口没有问题.但是前端人员说访问存在跨域问题.无法正常调用 public EiInterfaceQZPO toMail(String biz,HttpServletResponse response){ response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Headers", "Conte

PhoneGap开发跨平台移动APP - 解决跨域资源共享

解决跨域资源共享 一.WebApi解决跨域资源共享. 开发中选择WebApi来作为服务端的数据接口,由于使用PhoneGap,就需要通过js来获取远程远程数据服务器的数据,由于同源策略的限制,这就涉及到跨域资源共享问题. 首先新建一个简单的WebApi项目, 使用微软的CORS解决方案,再Nugget中下载microsoft.aspnet.webapi.cors. 配置WebApiConfig: //这里先用*来测试,生产环境下,这样配置是不安全的,需要做一些限制.config.EnableCo

前端开发环境搭建以及如何跨域

前端本地开发环境搭建总结: 安装nodejs环境(推荐6.0以后的LTS版本),安装完之后打开终端(mac平台),windows平台可以 WIN+R 打开运行,输入cmd,打开命令窗口,输入npm --version,如果能看到版本,说明已经安装成功: 在本地电脑的工作目录下面,执行 "git clone" + gitlab仓库的地址,把项目克隆下来: 使用编辑器(推荐webstorm或者vs code,功能强大,当然如果有其他熟悉的IDE也可以,前提是熟悉)打开项目,找到node的s

记录我开发工作中遇到HTTP跨域和OPTION请求的一个坑

我通过这篇文章把今天工作中遇到的HTTP跨域和OPTION请求的一个坑记录下来. 场景是我需要在部署在域名a的Web应用里用JavaScript去消费一个部署在域名b的服务器上的服务.域名b上的服务也是我开发的,因此我将域名a加到了该服务的HTTP响应结构的头文件里,这样就允许了域名a上的JavaScript代码用AJAX访问域名b的服务. 域名b上的服务是一个Servlet,允许域名a跨域访问的代码就一行: protected void doGet(HttpServletRequest req

解决前端开发环境中的的跨域问题

一.为什么会有跨越问题是客户端浏览器同源策略导致的,就是浏览器不允许不同源的站点相互访问.试想一下要是没有这个,那站点里的安全信息如cookie,账号/密码等是不是很容易被其它站点获取.二.解决思路知道是客户端浏览器为了安全使用同源策略导致的,而服务端是没有这个限制的,那我们就只能通过服务端进行跨域了.不管是jsonp,core,还是代理的方式,都是需要服务配合的.哈哈,这也是为啥后端和生产环境下比较少听说跨域的问题,所以这里介绍前端开发环境中的几种解决方法.三.解决方案1.完全交予后端解决,配

Java开发中解决Js的跨域问题

主流方法有JSONP和CORS两种,这里记一下后者的方式,理论基础就是在请求的时候在http请求头中添加如下属性: //指定允许其他域名访问 Access-Control-Allow-Origin:http://localhost:8989 如果后端用Java开发,在返回请求中可以添加如下属性 1.在跨域问题中,如果不操作cookie,只需要在后端代码中添加如下代码就可以 response.setHeader("Access-Control-Allow-Origin", "h

vue-webpack项目本地开发环境设置代理解决跨域问题

前言: 一般跨域问题只要后端配置好的话,是不需要前端做处理的,但也不能保证你遇到的所有后端都能很好的处理这个问题,这个时候可能就需要前端设置代理解决这个问题了. 配置方法: 1. config/index.js proxyTable: { '/api': { target: 'http://192.168.8.8:8080', // 要访问接口的域名 // secure: false, // 如果是https接口,需要配置这个参数 changeOrigin: true, // 如果接口跨域,需要

Node.js配合node-http-proxy解决本地开发ajax跨域问题

情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. CORS跨域:后端接口在返回的时候,在header中加入'Access-Control-Allow-origin':* 之类的(有的时候后端不方便这样处理,前端就蛋疼了) 3. 用nodejs搭建本地http服务器,并且判断访问接口URL时进行转发,完美解决本地开发时候的跨域问题. 用到的技术: 1

Web开发人员不要错过的60款用户界面设计工具(中)

21. Dojo Dojo是一个用javascript语言实现的开源DHTML UI工具包,可实现高性能的桌面和移动应用程序开发,在国内亦有大量忠实用户. 22. Fivesecondtest Fivesecondtest可以优化你的登陆界面,并分析设计中最突出的元素. 23. Android UI Elements Set 集合了大量Android OS UI元素,并且全部都是免费的. 24. Massive Web UI and Button Set Massive Web UI and B