美文网首页
跨域解决方案

跨域解决方案

作者: swoft_ | 来源:发表于2019-07-26 13:23 被阅读0次

什么时候会发生跨域?

不同源

同源

同源指的是协议、域名、端口号全部相同。同源策略(Same Origin Policy)是一种约定,它是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能都可能会受到影响。Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现
(域名要相同,二级域名也会跨域)
针对非同源的情况制定了一些限制条件,

  1. 无法读取不同源的cookie、LocalStorage、indexDB。
  2. 无法获得不同源的DOM。
  3. 不能向不同源的服务器发送Ajax请求。

解决方案

cors

CORS是W3C制定的跨站资源分享标准,可以让AJAX实现跨域访问,定义了在必须访问跨域资源时浏览器与服务器该如何沟通。CORS背后的基本思想,就是使用自定义的HTTP头部让浏览器和服务器进行沟通,从而决定请求或响应应该成功还是失败。

交互

  1. 每次访问接口之前必须先握手(添加origin头部,包含协议 域名 端口)
Origin: http://www.xxxx.com
  1. 服务器是否接受这个请求,在Access-Control-Allow-Origin头部中发回相同的源信息(如果是公共资源,可以发“*”)。例如:
Access-Control-Allow-Origin: http://www.example.com

缺点:即使非常简单的请求,也会发送2个接口调用,第一次握手,允许之后才会发送第二次调用

代理(nginx)

前段nginx配置添加一下代理的pass

location ~* ^/api/
   {
      proxy_pass  http://xxx;
   }

在后端项目中定一下上游服务

upstream xxx  {
       server 127.0.0.1:8800;
}
server {
    listen       8800;
    location / {
          try_files $uri $uri/ /index.php?$query_string;
    }
  ...

相关文章

  • Web前后端跨域问题处理

    跨域问题有前台跨域(iframe间)和后台跨域。 前台跨域的解决方案可以采用跨域文档通讯(Cross domain...

  • 跨域问题,解决方案

    跨域问题,解决方案 - Nginx反向代理跨域问题,解决方案 - CORS方案此为原作者的链接:跨域问题,解决之道

  • 前端如何解决常见跨域问题

    跨域解决方案 1、 通过jsonp跨域 2、 document.domain + iframe跨域 3、 loca...

  • 开发环境跨域和生产环境跨域

    开发环境跨域 前后端分离,IP地址不同,请求数据必然导致跨域问题;解决方案:proxy设置 生产环境跨域 解决方案...

  • 浏览器跨域及其解决方案

    title: 浏览器跨域及其解决方案author: Maydate: 20220428 什么是跨域跨域的表现解决跨...

  • 跨域解决方案

    跨域解决方案 跨域解决方案有:设置document.domain,使用带src标签,JSONP,navigatio...

  • 跨域

    参考资料 HTTP访问控制(CORS)跨域解决方案跨域详解

  • Angular访问WebApi出现options方法

    解决方案: 解决跨域:

  • 跨域解决方案(史上最易懂)

    跨域总结 1.跨域思路 跨域解决方案一般分为两种:前端解决,后端解决 1.1 前端解决方案 通过前端解决的思想就是...

  • ZUUL跨域问题

    云环境中每个服务自己有跨域解决方案,而网关需要做最外层的跨域解决方案.如果服务已有跨域配置网关也有,会出现*多次配...

网友评论

      本文标题:跨域解决方案

      本文链接:https://www.haomeiwen.com/subject/wfbrrctx.html