http 协议 默认端口号 80
同源策略
由网景公司提出的 -- 浏览器 的
为了浏览器安全而生
同源策略: 协议, 域名, 端口号 必须完全一致
违背同源策略, 就是跨域
跨域问题只存在于 Ajax 中____浏览器的 Ajax 引擎检测出来的问题____绕开这个引擎
由于跨域, 直接导致无法获取响应数据
1. JSONP 的跨域请求解决方案
由于 普通标签 没有跨域问题, 所以利用 <script> 标签 来发送 跨域请求
利用 <script> 标签 能够跨域, 且请求到资源后直接执行
优势:
只能发 get 请求
兼容性很好
1. 创建 script 标签
let script = document.createELement("script");
2. 设置响应成功的 全局回调函数
- Windows.getData = function(server_info){
- console.log(server_info); // 直接打印 接收到的 响应数据
- };
3. 设置 script 的 src 属性
script.src = 'http://localhost:3000/jsonp?callback=getData';
4. 将 script 添加到页面中生效
document.body.appendChild(script);
5. 服务器端 Ajax.JS
- App.get('', ()=>{
- const data = {name: 'postResponse', age: 18}; // 要响应给浏览器的数据
- response.send(`${callback}(${JSON.stringify(data)})`);
- // getData(name: 'postResponse', age: 18) // 被 浏览器 请求过去, 然后执行了. 简介获取了响应数据
- // 必须要 将 对象转化为 JSON 数据, 然后被浏览器 解析成 字符串. 否则报错
- });
实例源代码
node 服务器 index.JS
- const express = require('express');
- const App = express();
- App.use(express.static('public'));
- App.use(express.urlencoded({extended: true}));
- // 原生 Ajax 的 get 路由
- App.get("/jsonp", (request, response)=>{
- // 获取请求参数
- const {callback} = request.query;
- const data = {name: 'postResponse', age: 18}; // 要响应给浏览器的数据
- response.send(`${callback}(${JSON.stringify(data)})`);
- // getData(name: 'postResponse', age: 18)
- // 被 浏览器 请求过去, 然后执行了. 间接获取了响应数据
- // 必须要 将 对象转化为 JSON 字符串数据, 然后被浏览器 解析成 JSON 对象. 否则报错
- });
- /**************** 端口号 3000, 启动服务器 ***************/
- App.listen(3000, err=>console.log(err?err:'\n\n 服务器已启动: http://localhost:3000/jsonp.html\n\t\tHunting Happy!'));
浏览器前端
public/index.HTML
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <body>
- <button id="btn">
- 点击发送 JSONP 的跨域请求
- </button>
- <script type="text/javascript">
- document.getElementById('btn').onclick = function() {
- /*
- JSONP:
- 工作原理:
- 利用 script 标签能够跨域的特性解决跨域的
- 特点:
- 1. 只能发送 get 请求
- 2. 兼容性好
- */
- // 1. 创建 script 标签
- let script = document.createElement('script');
- // 2. 设置响应成功的全局回调函数
- Windows.getData = function(data) {
- console.log(data);
- };
- // 3. 设置 script 的 src 属性
- script.src = 'http://localhost:3000/jsonp?callback=getData';
- // 4. 将 script 添加到页面中生效
- document.body.appendChild(script);
- }
- </script>
- </body>
- </HTML>
2. cors 官方解决方案
官方提供的跨域问题解决方案
前端不必做任何事, 在服务器端设置一个响应头即可
注意:
支持所有请求方式
兼容性差,
- access-control-allow-origin
- App.get('/cors', (request, response)=>{
- response.set('access-control-allow-origin', '*'); // 允许所有请求地址跨域
- response.send({
- "name":'corsResponse', age: 22
- });
- });
实例源代码
node 服务器 index.JS
- const express = require('express');
- const App = express();
- App.use(express.static('public'));
- App.use(express.urlencoded({extended: true}));
- // 原生 Ajax 的 get 路由
- App.get('/cors', (req, res) => {
- /*
- cors 是官方提供的解决跨域问题的一种方案
- 特点:
- 1. 所有请求方式都支持
- 2. 兼容性较差
- 使用:
- 设置一个响应头 access-control-allow-origin
- */
- // res.set('access-control-allow-origin', '*'); // 允许所有请求地址跨域
- res.set('access-control-allow-origin', 'http://localhost:3000/cors'); // 允许当前请求地址跨域
- res.send({name: 'jack', age: 18});
- });
- /**************** 端口号 3000, 启动服务器 ***************/
- App.listen(3000, err=>console.log(err?err:'\n\n 服务器已启动: http://localhost:3000/cors.html\n\t\tHunting Happy!'));
浏览器 前端代码 index.HTML
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 官方 cors 解决跨域问题
- </title>
- </head>
- <body>
- <button id="btn">
- 点击按钮发送 Ajax 请求
- </button>
- <script src="https://cdn.bootCSS.com/jquery/1.12.4/jquery.min.js">
- </script>
- <script type="text/javascript">
- $('#btn').click(function() {
- $.get('http://localhost:3000/cors',
- function(server_info) { // 成功的回调函数
- console.log(server_info);
- })
- })
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-2995016.html