标签:end 属性 nihao change har level .post highlight 状态码
前端代码
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
标签:end 属性 nihao change har level .post highlight 状态码
原文地址:http://www.cnblogs.com/hangaoke/p/6260702.html