最主流的方法CORS解决跨域在前段开发中,跨域是我们必须要面对的问题,不要慌,今天这里,本着学习的态度简单的阐述一下,c

在前段开发中,跨域是我们必须要面对的问题,不要慌,今天这里,本着学习的态度简单的阐述一下,cors解决跨域,请多多指教.

什么是跨域?

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制.

常见的跨域场景

所谓的同源是指，域名、协议、端口均为相同

http://localhost:3000/index.html 调用 http:// 127.0.0.1:3000/getapi 跨域域名不同

http://localhost:3000/index.html 调用 http://localhost:3000/getapi 非跨域

http://localhost:3001/index.html 调用 http://localhost:3000/getapi 跨域,端口号不同

https://localhost:3000/index.html 调用 http://localhost:3000/getapi 跨域,协议不同

跨域浏览器中报错如下图:

跨域资源共享 CORS

目前主流的跨域解决方案

简介

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

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。IE8+：IE8/9需要使用XDomainRequest对象来支持CORS。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

两种请求

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

（1) 请求方法是以下三种方法之一：

HEAD
GET
POST

（2）HTTP的头信息不超出以下几种字段：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain 只要同时满足以下两大条件，就属于简单请求。

从上述浏览器报错信息可以看出:由于浏览器预检,响应头标头缺少 Access-Control-Allow-Origin: * 浏览器对比图如下: (1)未解决跨域前:

一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

(2)解决跨域后:

cors解决跨域代码如下

const express = require('express')
const app = express()
const cors = require('cors')//引用包
app.use(cors())//  解决跨域问题

以上只是针对跨域问题,使用cors解决的简单阐述,当然还有很多其他方法,在此就不一一阐述了.