前端跨域以及解决++常见 http status

一 、 跨域

1-1 跨域概念

跨域不是请求发不出去，而是响应被浏览器拦截了

1、 同源策略以及限制内容：

• 同源策略： 浏览器最核心最基本的安全功能
• 缺少同源策略，浏览器容易受到XSS、CSRF攻击
• 同源： “协议+域名+端口”三者相同

2、 同源策略限制内容：

• Cookie、LocalStorage、IndexedDB等存储性内容
• DOM节点
• AJAX请求发送后，结果被浏览器拦截了

3、允许跨域加载资源的三个标签：

• <img src='xxx'>
• <script src='xxx'>
• <link href='xxx'>

1-2 跨域解决方案

1-2-1 CORS：

1、 浏览器自动进行CORS通信，后端实现CORS，就可以跨域
2、 浏览器设置Access-Control-Allow-Origin可以开启CORS

• 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源

1-2-2 jsonp

1、 原理：

• 利用<script>标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的json数据，JSONP请求一定需要对方的服务器做支持

2、 优缺点：

• 简单兼容性好，用于解决主流浏览器的跨域数据访问
• 缺点： 仅支持get方法，不安全会遭受XSS攻击

3、 JSONP的实现流程：

• 声明一个函数
  • 函数名(如 show)当作参数值，要传递给跨域请求数据的服务器
  • 函数形参为要获取目标数据
• 创建一个标签，把那个跨域的API数据接口地址，赋值给script的src，还要在这个地址中向服务器传递该函数名（可以通过问号传参:?callback=show）
• 服务器接收到请求后，需要进行特殊的处理：把传递进来的函数名和它需要给你的数据拼接成一个字符串,例 如：传递进去的函数名是show，它准备好的数据是show(‘我不爱你’)。
• 最后服务器把准备的数据通过HTTP协议返回给客户端，客户端再调用执行之前声明的回调函数（show），对 返回的数据进行操作。

4、

function jsonp({url,params,callback}) {
	return new Promise((resolve, reject) => {
		let script = document.createElement('script')
		window[callback]= function(data) {
			resolve(data)
			document.body.removeChild(script)
		}
		params = {...params, callback}
		let arrs = []
		for(let key in params) {
			arrs.push(`${key}=${params[key]}`)
		}
		script.src = `${url}?${arrs.join('&')}`
		document.body.appendChild(script)
	})
}
jsonp({
	url: '',
	params: {wd: 'I love you'},
	callback: 'show'
}).then(data => {
	console.log(data)
})

// server.js
let express = require('express')
let app = express()
app.get('/say', function (req, res) {
	let { wd, callback } = req.query
	console.log(callback)
	res.end(`${callback('我不爱你')}`)
})
app.listen(3000)

1-2-3 nginx反向代理【最简单的跨域方式】

1、 同源策略是浏览器需要遵循的标准，如果是服务器向服务器请求就无需遵循同源策略
2、 自己搭建一个中转ngnix服务器，用于转发请求

• 只需要修改ngnix的配置就可以解决前端跨域问题，支持所有的浏览器，支持session，不需要修改任何代码，并且不会影响服务器性能

3、 实现思路： ngnix配置一个代理服务器（域名与domain相同，端口不同），反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录

1-2-4 Node中间件两次代理（两次跨域）

1、

• 接受客户端请求
• 将请求 转发给服务器
• 拿到服务器 响应 数据
• 将响应 转发给客户端

2、 在vue.config.js中添加如下配置：

devServer: {
	proxy: "http://localhost:5000"
}

二、 常见http status

2-1 系列

1、 1XX系列：指定客户端应响应的某些动作，代表请求已被接受，需要继续处理。由于 HTTP/1.0 协议中没有定义任何 1xx 状态码，所以除非在某些试验条件下，服务器禁止向此类客户端发送 1xx 响应。

2、 2XX系列：代表请求已成功被服务器接收、理解、并接受。这系列中最常见的有200、201状态码。

3、 3XX系列：代表需要客户端采取进一步的操作才能完成请求，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明。这系列中最常见的有301、302状态码。

4、 4XX系列：表示请求错误。代表了客户端看起来可能发生了错误，妨碍了服务器的处理。常见有：401、404状态码。

5、 5xx系列：代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。常见有500、503状态码。

2-2 详细

2-2-1 2开头 （请求成功）表示成功处理了请求的状态代码。

200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
201 （已创建） 请求成功并且服务器创建了新的资源。
202 （已接受） 服务器已接受请求，但尚未处理。
203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。
204 （无内容） 服务器成功处理了请求，但没有返回任何内容。
205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。
206 （部分内容） 服务器成功处理了部分 GET 请求。

2-2-2 3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。

300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。
307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

2-2-3 4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

400 （错误请求） 服务器不理解请求的语法。
401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
403 （禁止） 服务器拒绝请求。
404 （未找到） 服务器找不到请求的网页。
405 （方法禁用） 禁用请求中指定的方法。
406 （不接受） 无法使用请求的内容特性响应请求的网页。
407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
408 （请求超时） 服务器等候请求时发生超时。
409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。
411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。
412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。
413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。
415 （不支持的媒体类型） 请求的格式不受请求页面的支持。
416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。
417 （未满足期望值） 服务器未满足"期望"请求标头字段的要求。

2-2-4 5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。

500 （服务器内部错误） 服务器遇到错误，无法完成请求。
501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。
504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。