了解前后端传参,跨域以及怎么解决跨域报错

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

传参

请求

我们使用ajax请求服务器接口传参,按照http协议的约定,每个请求都有三部分:

1. 请求行 --保存了请求方式，地址，可以以查询字符串的格式附加一部分数据。

2. 请求头 --它可以附加很多信息，其中content-type用来约定请求体中保存的数据格式。 content-type常见有三种取值：

   content-type的值	表示请求体的数据格式	示例
   application/x-www-form-urlencode	普通键值对象	a=2&c=1
   application/json	json对象	{a:1,b:{c:1}}
   multipart/form-data	上传文件	file

3. 请求体 --本次请求携带的参数。至于这些参数到了后端应该如何解析出来，由请求头中的content-type来决定。

求情传参方法

1. 请求行传参。常见方式如下：

• • 使用ajax技术，通过get方式传参。
  • 在浏览器地址栏中输入接口地址并补充上查询字符串。

2. 请求体传参

   • ajax中的post, put, delete可以从请求体中进行传参。
   • 注意 -get方式没有请求体！

另外，请求头中的content-type用来告之服务器应该以何种方式去解析请求体中的数据

跨域

首先 先了解url的组成 : 协议 域名 端口

这个url中 http就是协议 127.0.0.1 就是域名 也可以是localhost 3000就是端口号

跨域报错

前面了解到了url的组成,那么跨域报错是什么错误呢

跨域错误：浏览器发起了不同源的ajax请求====> 报跨域的错误

浏览器向web服务器发起http请求时 ，如果同时满足以下三个条件时，就会出现跨域问题，从而导致ajax请求失败：

1. 请求响应双方的url不同源。

双方url：发出请求所在的页面 与 所请求的资源的url

同源是指：协议相同，域名相同，端口相同 都相同。

以下就是不同源的：

从http://127.0.0.1:5500/message_front/index.html 请求http://localhost:8080/getmsg

(域名和端口不相同)

网络中不同源的请求有很多。

2. 请求类型是xhr请求。就是常说的ajax请求。不是请求图片资源，js文件,css文件等

3. 你的浏览器觉得不安全 。跨域问题出现的基本原因是浏览器的同源策略。同源策略是一个重要的安全策略，它限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。

注意，错误是发生在浏览器端的。请求是可以正常从浏览器发到服务器端，服务器也可以处理请求，只是返回到浏览器端时出错了。

解决跨域错误

上面说了,必须同时满足三个条件才会出现跨域报错问题,那么只要破坏其中一个就可以解决跨域错误了

1. 让响应双方同源.

   1. 集中部署： 让请求不要跨域
   2. 服务器代理

2. 请求是ajax

   改发JSONP

3. 浏览器觉得不安全 （后端还是能收到请求的）

   可以安装一个浏览器插件allow-control-allow-origin 绕过同源策略。

   用postman软件测试

   CORS

解决办法

1. 集中部署(不推荐) : 让请求不跨域

   将前后端放在一起,静态资源托管,就可以使url同源

public里面放前端项目

这个方法基本不用,现在都是前后端分离,不会放一起了,了解即可

2. 改发JSONP

JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧。它本质并不是ajax请求，所以没有跨域问题。

后端接口的返回值是一个特殊的字符串： 一个刻意拼写的js函数调用语句。

jQuery有封装好的发送jsonp的方法,后端可以使用express封装好的.jsonp进行响应

具体来说就是给ajax请求添加一个dataType属性，其值为"jsonp"。

前端页面

$.ajax({
   type: 'GET',
   url: 'http://localhost:4000/get', 
   success: function (result) {
      console.log(result);
   },
   dataType: 'jsonp' // 必须要指定dataType为jsonp
});

后端接口 express框架已经提供了一个名为jsonp的方法来处理jsonp请求:

const express = require('express');
const app = express();
app.get('/get', (req, res) => {
  let data = {a:1,b:2}
  // res.json(data)
  res.jsonp(data)
})
app.listen(3000, () => {
  console.log('你可以通过http://localhost:3000来访问...');
});

原来是res.json,要改成res.jsonp

原理

第一步：产生一个随机函数名；并创建这个函数

第二步：动态创建script标签，其src就是拼接的后端接口地址及callback值，如果有其它参数，则正常传递

第三步：请求成功返回之后，执行第一步中创建的函数这个函数最终会指向$.ajax({success:function(){}}) 中的success

第四步：销毁 第一步中创建的函数及第二步中创建的script标签

JSONP优点: 发展很长时间了,可靠,成熟,兼容性高

缺点: 只能发送get请求

3. CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10(ie8通过XDomainRequest能支持CORS)。

通过在被请求的路由中设置header头，可以实现跨域。

res.setHeader('Access-Control-Allow-Origin', "*")

res.setHeader('Access-Control-Allow-Origin', "*")

app.get('/api/getbooks', async function (req, res) {
  const data = await getData()
  //设置响应头 :Access-Control-Allow-Origin *
  res.setHeader('Access-Control-Allow-Origin', "*")
    //*代表所有,表示该资源谁都可以用
  res.send({
    "status": 200,
    "msg": '图书获取成功',
    "data": data,
  })
})

但是每个响应都要设置一次响应头是不是很麻烦,所以我们可以使用一个第三方包 cors

要点:

1. 它是一个npm包，要单独下载使用 npm 包 cors npm i cors
2. 当做express中的中间件，注意代码应该放在顶部

这样我们就不需要一个一个设置响应头了

jsonp和cors的区别

jsonp：

• 不是ajax
• 只能支持get方式
• 兼容性好

cors:

• 前端不需要做额外的修改，就当跨域问题不存在。
• 是ajax
• 支持各种方式的请求(post,get....)
• 浏览器的支持不好（标准浏览器都支持）

options请求

options请求

如果跨域ajax不是简单请求，就会先发出options预检请求，然后再发真实的请求。

偷来的面试点