跨域的另⼀种解决⽅案CORS（CrossOriginResourceSharing）跨域资源共享在我们⽇常的项⽬开发时使⽤AJAX，传统的Ajax请求只能获取在同⼀个域名下⾯的资源，但是HTML5打破了这个限制，允许Ajax发起跨域的请求。
浏览器是可以发起跨域请求的，⽐如你可以外链⼀个外域的图⽚或者脚本。
但是Javascript脚本是不能获取这些资源的内容的，它只能被浏览器执⾏或渲染。
主要原因还是出于安全考虑，浏览器会限制脚本中发起的跨站请求。
(同源策略，即JavaScript或Cookie只能访问同域下的内容)。
跨域的解决⽅案有多重JSONP、、Iframe等，当然还有CORS（跨域资源共享，Cross-Origin Resource Sharing）今天就来了解下CORS的原理，以及如何使⽤。
⼀、CORS概述跨源资源共享标准通过新增⼀系列 HTTP 头，让服务器能声明那些来源可以通过访问该服务器上的各类资源（包括CSS、图⽚、JavaScript 脚本以及其它类资源）。
另外，对那些会对服务器数据造成破坏性影响的 HTTP 请求⽅法（特别是 GET 以外的 HTTP ⽅法，或者搭配某些MIME类型的POST请求），标准强烈要求必须先以 OPTIONS 请求⽅式发送⼀个预请求(preflight request)，从⽽获知服务器端对跨源请求所⽀持 HTTP ⽅法。
在确认服务器允许该跨源请求的情况下，以实际的 HTTP 请求⽅法发送那个真正的请求。
服务器端也可以通知客户端，是不是需要随同请求⼀起发送信⽤信息（包括 Cookies 和 HTTP 认证相关数据）。
⼆、CORS原理三、CORS跨域请求控制⽅法1.http请求头Origin: 普通的HTTP请求也会带有，在CORS中专门作为Origin信息供后端⽐对,表明来源域。
Access-Control-Request-Method: 接下来请求的⽅法，例如PUT, DELETE等等Access-Control-Request-Headers: ⾃定义的头部，所有⽤setRequestHeader⽅法设置的头部都将会以逗号隔开的形式包含在这个头中2.http响应头然后浏览器再根据服务器的返回值判断是否发送⾮简单请求。
javascript中的iframe基本用法iframe是HTML中的一种元素，它可以嵌入其他网页内容到一个网页中，提供了一种简单的方式来展示其他网页的内容。
在JavaScript中，我们可以使用iframe来加载和操作iframe中的内容，从而实现一些特殊的功能和效果。
一、基本用法1.创建iframe元素：在HTML代码中，可以使用<iframe>标签来创建一个iframe元素。
例如：```html<iframesrc="other_page.html"width="500"height="300"></ifr ame>```上面的代码创建了一个宽为500像素、高为300像素的iframe元素，并指定了其内容为“other_page.html”。
2.获取iframe元素：在JavaScript中，可以使用document对象的getElementById()方法或getElementsByTagName()方法来获取iframe元素。
例如：```javascriptvariframe=document.getElementById("myIframe");```上面的代码获取了一个id为“myIframe”的iframe元素。
3.操作iframe内容：可以通过改变iframe元素的src属性来加载不同的页面，也可以通过读取iframe元素的内容来获取iframe中的数据。
例如：```javascript//加载其他页面iframe.src="other_page.html";//读取iframe中的数据variframeContent=iframe.contentWindow.document.body.inner HTML;```上面的代码分别加载了其他页面并读取了iframe中的HTML内容。
深⼊浅析同源策略和跨域访问1. 什么是同源策略理解跨域⾸先必须要了解同源策略。
同源策略是浏览器上为安全性考虑实施的⾮常重要的安全策略。
何谓同源:URL由协议、域名、端⼝和路径组成，如果两个URL的协议、域名和端⼝相同，则表⽰他们同源。
同源策略:浏览器的同源策略，限制了来⾃不同源的"document"或脚本，对当前"document"读取或设置某些属性。
（⽩帽⼦讲web 安全[1]）从⼀个域上加载的脚本不允许访问另外⼀个域的⽂档属性。
举个例⼦：⽐如⼀个恶意⽹站的页⾯通过iframe嵌⼊了银⾏的登录页⾯（⼆者不同源），如果没有同源限制，恶意⽹页上的javascript 脚本就可以在⽤户登录银⾏的时候获取⽤户名和密码。
在浏览器中，<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源，⽽不受同源限制，但浏览器限制了JavaScript的权限使其不能读、写加载的内容。
另外同源策略只对⽹页的HTML⽂档做了限制，对加载的其他静态资源如javascript、css、图⽚等仍然认为属于同源。
http://localhost:8080/test.html<html><head><title>test same origin policy</title></head><body><iframe id="test" src="http://localhost:8081/test2.html"></iframe><script type="text/javascript">document.getElementById("test").contentDocument.body.innerHTML = "write somthing";</script></body></html>http://localhost:8081/test2.html<html><head><title>test same origin policy</title></head><body>Testing.</body></html>在Firefox中会得到如下错误：Error: Permission denied to access property 'body'2. Ajax跨域Ajax (XMLHttpRequest)请求受到同源策略的限制。
vue跨域解决方法Vue是一种流行的前端框架，用于构建用户界面。
然而，在开发过程中，我们经常会遇到跨域的问题。
跨域是指在浏览器中，一个域名下的网页去请求另一个域名下的接口，浏览器会默认阻止这种行为。
本文将介绍一些解决Vue跨域问题的方法。
一、使用代理服务器使用代理服务器是解决Vue跨域问题的常见方法。
我们可以在config目录下的index.js文件中配置代理服务器。
具体步骤如下：1. 打开index.js文件，找到dev属性下的proxyTable选项；2. 在proxyTable中添加一个代理配置，如下所示：```javascriptproxyTable: {'/api': { // 这里的/api是你要请求的接口的路径前缀target: 'http://localhost:3000', // 这里的localhost:3000是接口的域名和端口changeOrigin: true,pathRewrite: {'^/api': '' // 重写路径，去掉路径前缀}}}```3. 保存文件并重新启动Vue项目。
这样配置之后，当我们在Vue项目中发送请求时，会将请求转发到代理服务器上，再由代理服务器去请求接口，从而解决了跨域问题。
二、使用JSONPJSONP是一种跨域解决方案，它利用了script标签的src属性可以跨域请求的特性。
具体步骤如下：1. 在项目中创建一个util.js文件，并在其中定义一个自己封装的JSONP函数，如下所示：```javascriptexport default function jsonp(url, params, callback) {let script = document.createElement('script');let paramStr = '';for (let key in params) {paramStr += `&${key}=${params[key]}`;}script.src = `${url}?callback=${callback}${paramStr}`;document.body.appendChild(script);}```2. 在需要跨域请求的地方，引入util.js文件，并调用JSONP函数，如下所示：```javascriptimport jsonp from './util.js';jsonp('http://localhost:3000/api', { id: 1 }, 'callback');```3. 在接口返回的数据中，使用callback函数将数据传递给前端。
