一、跨域请求的含义

浏览器的同源策略，出于防范跨站脚本的攻击，禁止客户端脚本（如 JavaScript）对不同域的服务进行跨站调用。

一般的，只要网站的 协议名protocol、 主机host、 端口号port 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用。这也是我们下面实践的理论基础。我们利用 NodeJs 创建了两个服务器，分别监听 3000、 3001 端口（下面简称 服务器3000 与 服务器3001 ），由于端口号不一样，这两个服务器以及服务器上页面通信构成了跨域请求。

在服务器3000 上有如下的页面：

服务器3000 上的请求页面中包含如下 JavaScript 代码：

$(function() {

$("#submit").click(function() {

var data = {

id: $("#id").val()

};

$.ajax({

type: 'POST',

data: data,

url: 'http://localhost:3000/ajax/deal',

dataType: 'json',

cache: false,

timeout: 5000,

success: function(data) {

console.log(data)

error: function(jqXHR, textStatus, errorThrown) {

console.log('error ' + textStatus + ' ' + errorThrown);

}

});

服务器3000 对应的处理函数为

pp.post('/ajax/deal', function(req, res) {

console.log("server accept: ", req.body.name, req.body.id)

var data = {

id: req.body.id + ' - server 3000 process'

}

res.send(data)

res.end()

})

请求页面返回结果：

此处数据处理成功。
由于数据请求一般都是由页面发送数据字段，服务器根据这些字段作相应的处理，如数据库查询，字符串操作等等。所以我们这里简单的处理数据（在数据后面加上字符串‘server 3000 process’），并且返回给浏览器，表示数据经过服务器端处理。

如果让 服务器3000 上的页面向 服务器 3001 发起请求会怎样呢？

将请求页面中的 ajax 请求路径改为：

1
2
3
4
5

$.ajax({
    ...
    url: 'http://localhost:3001/ajax/deal',
    ...
});

服务器3001 对应的处理函数与 服务器3000 类似：

app.post('/ajax/deal', function(req, res) {

console.log("server accept: ", req.body.name, req.body.id)

var data = {

id: req.body.id + ' - server 3001 process'

}

res.send(data)

res.end()

})

结果如下：

结果证明了我们上面所说的端口号不同，发生了跨域请求的调用。

需要注意的是，服务器 3001 控制台有输出：

前端跨域请求原理及实践

一、 跨域请求的含义

一、跨域请求的含义