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