通过服务器配置cros来解决跨域问题

跨域问题是浏览器的问题,只在浏览器和服务器通信过程产生,服务器之间不会有

跨域问题是指浏览器执行的 JavaScript 代码试图通过 XMLHttpRequest 或 Fetch API 等方式向不同域(协议、主机、端口)的服务器发起请求时所遇到的限制。

在服务器之间通信的情况下,由于没有浏览器的参与,跨域问题并不会存在。服务器可以自由地与其他服务器进行通信,无需考虑同源策略的限制。

跨域:服务器和浏览器网页的ip,端口,协议只要一个不同

如果前端和后端分别运行在不同的端口上,就会产生跨域问题,因为同源策略要求端口号也要相同才被视为同一源。例如,
如果前端运行在 http://localhost:8080,而后端运行在 http://localhost:9090,这两个端口号不同,因此会被认为是不同的源,就会触发跨域问题。

如果是简单请求,会在请求中携带跨域选项,服务器返回http头也需要包含跨域选项,但是不会发送option进行预检

解决跨域问题

CORS(Cross-Origin Resource Sharing)是一种解决跨域问题的策略

“CROS” 是指跨域资源共享 (Cross-Origin Resource Sharing),它是一种机制,允许网页应用从不同源(域、协议、端口)的服务器请求资源,以克服浏览器的同源策略限制。

通过cors实现跨域访问的原理:在服务器配置cros

简单请求也需要服务器端正确配置 CORS。虽然简单请求在某些情况下不会触发浏览器的预检请求(Preflight Requests),但浏览器仍然会检查响应中是否包含 CORS 相关的头部信息。

简单请求和复杂请求

简单请求是使用简单 HTTP 方法(如 GET、POST、HEAD)和简单请求头部(如 Accept、Content-Type)的跨域请求。

简单请求的CORS流程:

如果请求满足简单请求的条件,服务器在响应中包含 Access-Control-Allow-Origin 头字段即可,无需携带其他的跨域头信息。

非简单请求的CORS的流程:

  1. 客户端发起预检请求(Preflight Request):
    如果是复杂请求,浏览器会首先发送一个 OPTIONS 请求作为预检请求。
    预检请求中包含了一些 CORS 相关的头部信息,如 Origin(请求来源)、Access-Control-Request-Method(请求方法)和Access-Control-Request-Headers(请求头部)等。
  2. 服务器响应预检请求:
    如果服务器允许该跨域请求,会在响应中添加一系列 CORS 相关的头部信息,如 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等,指示浏览器该请求被允许。
    如果服务器不允许该请求,则可能返回一个错误状态码,或者不包含 CORS 相关的头部字段。
  3. 浏览器检查预检响应,发送实际请求:
    如果预检请求通过验证,浏览器会发送实际的跨域请求。
    实际请求中会包含 Origin 头部,用于指示请求的来源。
  4. 服务器处理实际请求,每次服务器响应都需要携带跨域头信息
    服务器收到实际请求后,会处理请求并返回相应的数据。
  5. 浏览器处理响应:
    浏览器接收到服务器响应后,会检查其中的 CORS 相关头部信息,如 Access-Control-Allow-Origin。
    如果响应中的头部信息满足条件,浏览器会允许客户端获取响应数据,否则浏览器可能会拒绝访问响应数据。

总的来说,CORS 的流程是通过预检请求和实际请求,以及相应的响应来实现跨域通信的安全机制。

这个流程是由浏览器自动完成的

预检请求的发送是由浏览器自动处理的,不需要用户手动进行操作。当浏览器检测到跨域请求中涉及到了一些非简单请求时,例如使用了自定义头部、非简单的 HTTP 方法等,它会自动发送预检请求(OPTIONS 请求)。

我们只需要在服务器配置cros就行了

对于解决跨域请求的问题,主要的工作是在服务器端进行配置,确保服务器正确地响应跨域请求

你可能感兴趣的:(网络,前端,架构,服务器,运维)