首页 > 代码库 > 前端跨域之html5 XMLHttpRequest Level2
前端跨域之html5 XMLHttpRequest Level2
前端代码
var xhr=new XMLHttpRequest(); xhr.open(‘POST‘,‘http://127.0.0.1:8081/ceshi‘,true); xhr.onreadystatechange=function(){ if(xhr.readyState==4){//响应完毕后 if(xhr.status==200){//http状态码为200时 var result=xhr.responseText;//获取ajax请求的文本内容 console.log(result); } } } xhr.setRequestHeader("Content-Type","application/json") var a={name:123,data:"sss"}; var b=JSON.stringify(a); xhr.send(b) } //此处有两个坑 //坑1:有些ajax类库中的代码会影响服务器跨域设置 http://www.cnblogs.com/daishuguang/p/3971989.html //坑2:如果设置Content-Type为application/json那么在服务端需要设置 //res.header("Access-Control-Allow-Headers", "Content-Type");
//并且请求会发送两次,因为在跨域的时候,除了contentType为application/x-www-form-urlencoded, multipart/form-data或者text/plain外,都会触发浏览器先发送方法为OPTIONS的请求。比如说,你原来的请求是方法方法POST,如果第一个请求返回的结果Header中的Allow属性并没有POST方法,
那么第二个请求是不会发送的,此时浏览器控制台会报错,告诉你POST方法并不被服务器支持。
服务器代码 此处采用node.js为例
var express = require(‘express‘); var app = express(); var bodyParser = require(‘body-parser‘); // var urlencodedParser = bodyParser.urlencoded({ extended: false }) app.all(‘*‘, function(req, res, next) { res.header("Access-Control-Allow-Headers", "Content-Type"); res.header("Access-Control-Allow-Methods","POST,PUT,GET,DELETE,OPTIONS"); res.header("Access-Control-Allow-Origin", "*"); res.header("X-Powered-By",‘ 3.2.1‘) res.header("Content-Type", "application/json;charset=utf-8"); next(); }); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: false})) app.get(‘/‘, function (req, res) { console.log("你好啊") res.send(‘Hello World‘); }) app.post(‘/ceshi‘,function(req,res){ console.log(req.body) res.send("nihao") }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("服务器启动成功", host, port) })
参考文章http://www.jianshu.com/p/fddd19669ab3
前端跨域之html5 XMLHttpRequest Level2
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。