不会跨域问题？一分钟教会你三种办法，小白也能看懂。

小咪咪 2022-11-29 12:27 174阅读 0赞

导语：  
我们前端开发过程中，经常会去调用接口，但是会遇到跨域无法请求的问题？别怕，这篇博客一分钟教会你学会跨域！！！

**看官如果有其他前端问题，欢迎私信我！！**

### 本文的目录 ###

*  一，为什么会跨域？
 *  二，解决跨域问题
 *   *  1，jsonp
     *  2，跨域资源共享，CORS
     *  3，后端代理

# 一，为什么会跨域？ #

这是因为有浏览器的同源策略，是评定一个浏览器是否合格的最基本标准。

什么意思呢？就是浏览器通过这个策略，将不同网站给隔离开了，确保了信息的安全。你想一想要是没有这个东西，我们是不是可以随便请求淘宝接口，甚至给post一些信息到它们接口上，那不就乱了套？

所以它是很必要的，我们再来明确一个概念，需要达到3个条件，**相同协议，相同域名，相同端口**，才能通讯。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]

# 二，解决跨域问题 #

## 1，jsonp ##

首先我们先明白jsonp的原理，通俗的讲就是动态生成一个script，然后script不受同源策略的限制，就可以去请求不同域的接口了（不能理解？想象一下你的jQuery是怎么引入的，是不是script后面一个网址？道理是一样的。）

$.ajax({  
    	url: 'http://www.a.com/getdetail', 	//请求接口
    	type: 'get', 
    	dataType: 'jsonp', // 请求方式为jsonp 
    	jsonpCallback: "handleCallback", // 自定义回调函数名 
    	data: { } 
    });

jquery已经封装好这个函数，只要通过这个模式去写就行了，自动生成script去执行。

但是jsonp只能get，而不能post。

## 2，跨域资源共享，CORS ##

这个说白了就是后台代码允许某个域名下的请求，比如我是后台开发的人员，我可以写上允许http://www.xiaomizhou.com所有的接口调用，然后前端就不用做任何的解决跨域的操作，直接ajax请求就行了。

//服务端代码写上，允许http://www.xiaomizhou.com下的所有请求
    'Access-Control-Allow-Origin' : 'http://www.xiaomizhou.com'

所以前端开发的同学，只要让你的后端同学写上，你就不用考虑这个跨域了。

## 3，后端代理 ##

但是如果这个后台不是你们团队写的，你又很想去调用这个接口，那怎么办呢？

**很简单，同源策略是哪里来的，浏览器规定的，那你不要在浏览器内发起请求不就好了！！ 你可以写一个简单的后端程序，让你的调用接口请求让它去做。然后这个后端程序是你控制的，所以你想怎么请求都行。easy**

来来来，接我一个简单的node后台模板

![在这里插入图片描述][20200819195904573.png_pic_center]  
建议收藏，不然划着划着可能找不到了~

你的点赞是对我最大的**鼓励**！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/d0e3f0eb09b347259fa8ba4d23f97fbe.png
[20200819195904573.png_pic_center]: /images/20221124/2d8747ff8a274d2295010d599e1b581d.png