html 跨域_如何解决项目中的跨域问题

<div>
BS架构模式的项目中，跨域是非常常见的。因为浏览器端要访问的资源不一定总在同一域下，那么如何解决跨域是每个前端小伙伴必备的技能。 基本上有三种主流的解决方案
<ol><li>使用JSONP的方式</li><li>使用反向代理</li><li>使用跨域资源共享</li></ol>
 什么是跨域 首先，浏览器中有很多中方式从服务器去加载资源。比如：
<ol><li>a标签的href属性可以从服务器去加载hmtl文件</li><li>img标签的src属性可以从服务器去加载图片文件</li><li>link的href属性可以从服务器去加载css文件</li><li>script的src属性可以从服务器去加载js文件</li><li>form表单可以和服务器进行交互，既能加载数据也可以提交数据</li><li>ajax技术可以更加灵活的和服务器进行交互，可加载数据也可以提交数据，且是异步的，不会让整个页面重新加载</li><li>fetch一个新的异步刷新的api采用promise风格的接口....</li><li>在浏览器地址栏输入url地址，也可以加载资源....</li></ol>
 正常情况下，一次正常的访问都是从浏览器中输入url地址开始的，那么第一次一般情况下加载的都是一个html文件也就是我们所说的页面，那么这个html文件所来自的域我们可以成为主域，在html文件被加载的过程中又会发起很多次的请求（参考上述发起请求的方式），而且html中一般会嵌入js，在js中又会有ajax和fetch的这些代码，他们又会在特定的情况下发起请求。那么这些请求的目标服务器所在的域可能和主域并不是同一域，那么如果和主域不是同一个域则发生了跨域请求。 域指的是一个请求地址的协议，域名，端口这三部分，判断两个域是否相同，那就看域中的这三部分是否都一致。 跨域并不一定是问题 比如我们写了个页面，可以在 <code>http://localhost:3000</code>下访问，页面内容如下： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>我的第一个页面</title> </head> <body> <a href="https://www.baidu.com">百度</a> </body> </html> 复制代码 经验告诉我们上述代码点击链接后会跳转到百度首页，其实可以理解为跨域去请求了百度的首页文件。然后我们没有做任何的特殊处理却成功了。这就说明，并不是所有的跨域都会有问题，只有ajax和fetch产生的跨域才会被浏览器限制跨域限制的报错如下

<div style="text-align:center;">
<img alt="0e9d1c32f59caf9adbc2f1252f274e13.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-6a52fadb5cb943bf7f01aba1c20a6a43.png">
</div>
 那么我们处理跨域的方案也是针对这两种请求方式而设计的。 JSONP JSONP是一种比较古老的解决方案，这种方案首先没有兼容性问题，基本都可以使用，但是它所解决的问题比较有限，且对服务端接口有一定的要求。 原理：JSONP本质上使用的是script标签的src属性，前边提到过该标签有跨域请求资源的能力，且请求的资源类型是js脚本。也就是说，我们需要在服务器给返回一段js脚本，并且把要返回给前端的数据加入到这段js脚本中。在浏览器端执行这段脚本，从而达到获取数据的目的。 JSONP我们看到了本质并不是使用了ajax和fetch的请求方式，因此这种方式也只能解决get方式的请求。 代码如下: 服务端代码（nodejs） const express = require('express') const app = express(); cosnt data = [{id: 1}] // 要发送的数据 app.get('/getData', (req, res) => { // 前端需要给服务端传递一个函数名 const callbackName = req.query.callbackName; let jstxt = `${callbackName}(${JSON.stringify(data)})`;// 在服务端拼成的脚本为该函数的执行，并被传入了数据。 res.set('Content-Type', 'application/javascript'); res.send(jstxt); }) app.listen(3000, () => console.log('::3000')); 复制代码 浏览器端代码 function dealData(data){ // 该函数就是对服务端返回的数据进行处理的 // .... } // 创建script标签，并设置其src的地址为请求目标。请求的js脚本就会执行。 let scp = document.createElement('script'); scp.src = 'http://localhost:3000/getData?callbackName=dealData'; document.body.appendChild(scp); 复制代码 反向代理 这种方式目前使用相当普遍，就是在目标服务器和浏览器中间架一层服务器，我们称该服务器为代理服务器。方向代理的方式就是把静态的资源文件部署在代理服务器上，那么我们请求的时候，输入的是代理服务器