草庐IT

跨域

欲速则不达 2023-03-28 原文

跨域

什么是跨域

跨域主要由于不符合浏览器的同源策略所产生的一种现象，同源策略属于浏览器的一种安全策略，其要求是所请求资源的协议、域名、端口号与当前页面完全一致，目的是为了保护本地数据不被请求获取的数据污染，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击，因此同源策略拦截的是请求返回来的数据，即服务器响应了，但是响应的结果被浏览器拦截了。

浏览器采用同源策略，在没有明确授权的情况下，禁止页面加载或执行与自身不同源的任何脚本。

同源策略限制的内容

  • cookie、localStorage、indexDB等存储性内容。cookie只和域名以及路径关联，localStorage则是以源为单位进行管理，相互独立
  • 禁止对不同源页面DOM进行操作，主要场景是iframe跨域
  • ajax请求前后端分离的情况

允许跨域加载资源的标签

  • img-src
  • link-href
  • script-src
  • iframe-src

常见的解决跨域的方法

  • JSONP(JSON with Padding)

    只支持get请求，利用了script标签可获取跨域资源的特点，可跨域的标签还有img、link、iframe、script等。

    具体操作：服务端的响应内容是js代码，返回的是函数调用，并把参数传递进去。浏览器对此代码进行解析并执行，对应的函数声明由前端自己定义。

  • CORS(Cross-Origin Resource Sharing)

    跨域资源共享是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它源（域、协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。

    此机制新增了一组HTTP首部字段（header）来解决跨域问题，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

    这个方法主要需要后端接口做处理，使响应报文包含正确的CORS响应头，如：

    response.setHeader('Access-Control-Allow-Origin', '*'); // 允许的请求来源
response.setHeader('Access-Control-Allow-Headers', '*'); // 允许携带的头信息，用于预检请求的响应
response.setHeader('Access-Control-Allow-Methods', '*'); // 允许的请求类型，用于预检请求的响应
response.setHeader('Access-Control-Expose-Headers', 'token'); // 允许浏览器可以拿到的自定义响应头

  • 代理跨域

    前端本地开发通常会使用这种解决跨域的方法。

    比如使用Webpack作为构建工具时，可以对devServer.proxy进行代理配置，使满足特定规则的请求，被转发到真实的接口地址，相当于给真实的接口做了一层代理。

    module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://www.example.com',
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

    假设此时在A页面http://locahost:8080/index.html发起了一个请求http://localhost:8080/api/getList，请求实际会被转发至http://www.example.com/getList

跨域codeli的求职面试

有关跨域的更多相关文章

  1. 【uniapp】uni.request请求跨域问题解决方案 - 2

    例如，运行H5页面，请求一个地址资源，如果不是本站地址，浏览器就会报跨域错误，这样访问受限问题呈现例如，项目代码里是这样写的，运行H5测试uni.request({ url:'https://gitcode.net/zs1028/stat...ouces_2023/-/...', success(res){ console.log(res) }, fail(err){ console.error(err) }})因为https://gitcode.net不是本站地址，根据浏览器同源策略，是会报跨域错误，解决步骤打开项目的manifest.json文件，以源码视图查看，添加以下代码{ //.

  2. 7nm+跨域计算+极致性价比，这家芯片厂商助攻车企「降本增效」 - 2

    汽车芯片赛道的「卷」，或许超出了所有人的预期。对于单纯TOPS算力的比拼，已经翻篇，如何让车企有的用，用得上，还要用得好，已经是新风向。实际上，在汽车智能化刚刚开始的2018年，彼时类似斑马智行这样的车机系统仅仅是从软件层面改变传统座舱的人机交互体验（从功能机到智能机）。而类似Mobileye这样的ADAS视觉感知系统方案（EyeQ5之前），也仅仅是辅助驾驶的入门级。在高工智能汽车研究院看来，汽车芯片赛道经历了几个发展周期，1.0时代（以2020年上车的高通8155为代表），智能座舱进入硬件变革节点；2.0时代（以2021年上车的英伟达Orin为代表），智能驾驶进入硬件变革节点。而3.0时代，

  3. javascript - 为什么有些跨域 JSON 请求会失败，而有些则不会？ - 2

    我在理解JSON的安全性方面有点困难，因为通常理论上不应该起作用的事情看起来确实有效。AFAIK，从驻留在域A的页面上的脚本调用，不应该能够从域B接收数据。但是在下面的代码中，对一个外部域的调用失败，而另一个通过。并且两者都不是打包的JSON调用(jsonp)。这是为什么？难道不应该禁止两者都通过浏览器安全检查吗？我在Chrome和Firefox中得到了相同的结果。如果我在dropbox.com上托管以下html页面，Chrome会给我这个错误消息:XMLHttpRequestcannotloadhttp://www.odinfond.no/rest/fund/calc/fundRet

  4. javascript - Firefox 中使用 xhr、客户端证书的跨域 SSL 握手失败 - 2

    设置如下:Firefox(3.x和4b)，具有正确设置和有效的证书，包括客户端证书。带有XMLHttpRequest()类型AJAX调用的网页到不同的子域。所述子域中的自定义Web服务器接受请求，并以宽容的Access-Control-Allow-Origin响应header和要求客户验证。问题是Firefox突然中止了请求(好吧，这就是它在firebug中所说的)。使用openssls_server运行设置而是暗示Firefox实际上甚至不发送客户端证书:140727260153512:error:140890C7:SSLroutines:SSL3_GET_CLIENT_CERTIF

  5. javascript - 具有同级子域的跨域 JavaScript 代码 - 2

    我有两个网络应用程序设置:david.example.com和john.example.com大卫为约翰打开了一个新窗口:window.open('john.example.com');John现在想在David上设置一个输入元素:$("#input",window.opener.document).val("HelloDavid.");我的问题是，由于跨域脚本安全性，这在大多数现代浏览器上不起作用。我还尝试将document.domain设置为David和John上的不同域组合，但没有成功。唯一有效的情况是John在example.com上并且两者都将document.domain设

  6. javascript - 跨域 AJAX post 调用 - 2

    我必须对位于另一台服务器上的asp表单进行POST调用(带参数)。对于开发，我在同一台服务器上执行此操作，并且运行良好，但现在我在另一台服务器上对其进行测试，我收到的不是200状态，而是0状态。我认为这是因为它是一个跨域AJAX调用，这是唯一发生变化的地方。那么我该如何调用这个电话呢？是否有任何文件可以放在服务器/客户端上以允许此调用(如flash，...)？谢谢! 最佳答案 是的，假设您可以更改连接到的服务器你可以实现CrossOriginResourceSharing(CORS)如果要允许所有域访问，需要服务器返回Access-

  7. javascript - 同一台机器不同端口的Ajax跨域 - 2

    我们有一组我们从同一台机器调用的api，地址是服务器的mycompany.com:8080和mycompany.comajax.html文件。我们如何避免跨域策略？无论如何要用一些代理配置来做到这一点？请不要使用JSONP!谢谢! 最佳答案 两个或多个文档可以被认为在同一个域中，如果它们有-同一主机-同一港口-相同的协议(protocol)。在您的情况下，端口不同，因此您不能直接进行ajax查询。相反，您需要在响应中指定以下header。Access-Control-Allow-Origin:mycompany.com更多信息，查看

  8. javascript - 跨域在 iFrame 和父页面之间进行通信的可能方式 - 2

    请建议从iFrame触发父页面中的事件的可能技术。我尝试了url哈希和使用window.postMessage技术，但没有成功。 最佳答案 easyXDM正是为这个目的而设计的。您可以在http://easyxdm.net找到它它有很多例子。总而言之，它允许两个窗口使用字符串或RPC调用“自由”通信。参见http://consumer.easyxdm.net/current/example/methods.html对于其中一个RPC演示。 关于javascript-跨域在iFrame和父

  9. javascript - 是否可以在 Javascript 中进行跨域请求并设置自定义 header ？ - 2

    Sinceyoucan'tapplycustomheadersonJSONPcalls，如何使用jQuery发出跨域请求并应用自定义header？我基本上是在尝试使用jQuery访问google文档，并且需要传递身份验证token:vartoken="my-auth-token";$.ajax({url:"http://docs.google.com/feeds/documents/private/full?max-results=1&alt=json",dataType:'json',beforeSend:function(xhr){xhr.setRequestHeader("Aut

  10. javascript - 使用 Google Analytics 对子域进行跨域跟踪 - 2

    我刚刚设置了谷歌分析跨域跟踪。我已经看到了一些例子，但我想确保我做的是正确的。我遵循的文档在这里:http://support.google.com/analytics/bin/static.py?page=guide.cs&guide=1034143&topic=1033979我基本上有3个网站，它们都是子域。one.mysite.comtwo.mysite.comthree.mysite.com我已将以下行添加到默认的Analytics脚本，并确保我对_setAccount使用相同的值。_gaq.push(['_setDomainName','none']);_gaq.push([

随机推荐