解决前端跨域的方法有哪些

刺骨的言语ヽ痛彻心扉 2022-01-14 09:15 262阅读 0赞

1、**首先一个域名的组成：**  
![在这里插入图片描述][20190614180346556.PNG]  
当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域

JavaScript出于安全方面的考虑，不允许跨域调用其它页面的对象。跨域就可以理解为因为JavaScript同源策略的限制，a.com下的js无法操作b.com或者c.a.com域名下的对象。

2、**处理跨域的方法：**  
**1)处理方法一——在后台进行处理：通过在同域名下web服务器创建一个代理**  
例如某个前端页面想要调用上海的服务器，但它们不是同源的，但是它和北京的服务器是同源的，那就可以通过让北京服务器作为一个代理，先让北京的服务器从上海的服务器获取资源，再返回给前端就可以了。  
**2）处理方法二——JSONP**  
JSONP可以解决主流浏览器跨域数据访问的问题  
【注意】JSONP只能处理GET请求的跨域  
例如：  
在www.aaa.com的页面中写了如下代码：

其中有个script标签写的是bbb.com页面的地址，意思就是bbb.com这个页面是可以跨域用到aaa.com页面的js对象的  
然后在bbb.com的页面中就可以使用aaa.com的js对象了，如下：

jsonp('name':'张无忌','age':21)；//张无忌

下面以我做的一个前后端数据交互的案例来做这个的例子：https://blog.csdn.net/Sunday97/article/details/91883933  
看了上面这篇文章下面的案例才会容易理解点。直接在上面的前后端数据交互的这个案例来做改造

前端的代码修改的话只需要将dataType的值改为jsonp,再加上一个jsonp属性，值为callback(callback名字可以自己取，只需和后台相对应)（注意dataType不要写成了datatype）,这样改了以后，callback就会作为参数名和其他参数一样放在地址栏的后面传递给后台，其值会随机给生成。然后后台进行获取。  
例如下面的就是在调试台看到的，可以看到请求的地址中把callback作为参数提交并给其赋了很长一串值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]  
然后再看后端返回的信息中也会带上callback的值：  
![在这里插入图片描述][20190614191540224.PNG]  
下面是修改后的前端代码

同时后台也是需要修改代码的：  
后端是需要获取到jsonp传递过来的callback的，然后再在要返回给前端的信息上进行修改，下面要返回给前端的是$result，所有就需要在值得前面再拼接一个 $\_GET\[“callback”\],再将后面拼接得信息用()括起来。代码如下，只修改了GET的部分，POST部分用不到。

3）**处理方法三——XHR2**  
HTML5提供的XMLRequest Level2已经实现了跨域以及其它的一些新功能  
但是IE10以下的版本都不支持  
这个方法就是在服务器端做一些小小的改造：  
在后端数据页面的头部加上下面的两行代码

header("Access-Control-Allow-Origin:*");//后面的*表示所有的域都可以访问，也可以设置特定的域
    header("Access-Control-Allow-Methods:POST,GET")//允许GET和POST请求都可以跨域

例如在我的用php写的后端的头部加上这两行：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]

[20190614180346556.PNG]: /images/20220114/04e28ba4b489490da9a6938d29ff467e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]: /images/20220114/269e1bacc6464783b6feb1f31b2da2a6.png
[20190614191540224.PNG]: /images/20220114/b1cbd1c2503f4d49b62c1d853db06c48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]: /images/20220114/2952e168485944c38d346eb1fdd65e88.png