跨域实践记录01

1. 环境配置介绍：

前端：无（可以编写html文件即可）

后台：使用Node.js + Express

本次操作采用的原生Ajax，XMLHTTPRequest 对象来实现异步请求通信；

2. 跨域条件

前后端端口不一样，导致跨域问题；

3. 代码实现

1. 前端：写一个简单的html，点击按钮绑定handle事件，即去发送异步请求，希望从服务器得到data, 并在页面中显示；

2. 发送请求包含一下步骤

   • 步骤1 : 创建一个XHR对象
   • 步骤2： 创建一个HTTP请求，【定义一个响应函数】
   • 步骤3： 发送请求
   • 步骤4：处理请求返回的结果；
     

3. 后端： 就是注册路由 app.get(url, function) ,设置端口号 app.listen()，给浏览器返回data

   

   补充： 这里由于时间原因，本次只对get请求方式，做了参数提取 request.data, 如果是post请求方式，因为其参数存放在body，需要安装其他的插件，感兴趣的可以自行查阅资料；

   注意： 我们这里需要使用 服务器打开HTML文件所在工作区； 不可直接双击运行；不然是不会出现跨域问题的；

   前后端都启动了，OK，跨域问题出来了！！！

4. 解决跨域问题

本次采用的是CORS，核心：通过自定义头部来对浏览器和服务器进行沟通，从而决定请求和响应是否成功。

• 后台： 设置Access-Control-Allow-Origin

5. 最终结果

成功！