前端跨域的问题

一、使用JSONP

在前端引用script请求资源时，不存在跨域问题，这是因为当时设计这个script标签时，允许在别的源请求脚本，就可以利用这个来进行跨域问题

这个方法就是jsonp

html5的script标签默认的type属性是text/javascript，此时浏览器就会将客户端向服务器端请求返回的以JS处理

此时在客户端设置一个函数，这个函数专门用于处理跨域获取服务器json格式的数据，然后在URL上提供给服务器额外的参数，服务器看到这些参数就会执行响应的代码，然后把数据外包一个js函数，再以JSON数据的形式回传给客户端，客户端收到后调用提前设置好的函数，执行服务器传过来的数据，并且获取数据，简单来说就是不直接获取数据而是给数据包裹JS函数，变成不一样的JSON数据。因为一般都是用JS函数来包裹JSON数据所以称为JSON with Padding,JSONP。

  

二、CORS

当浏览器在跨域请求的时候会在请求头里加头部origin，表明自己的协议、主机和端口号，当服务器收到请求并看到这个origin头部时，如果需要允许访问，就添加头部Access-Control-Allow-Origin到响应里面，浏览器看到传回来的这个头部就知道能不能进行跨域请求了。

 

 三、vue.config.js反向代理

一般vue项目得自己在根目录添加vue.config.js这个文件

客户端：

 

 vue.config.js配置：

四、nginx

反向代理

反向代理和服务器端这边都属于服务器之间沟通，不像前端有浏览器的同源策略限制，因此就解决了跨域问题。

前端不访问服务器而是通过代理来访问服务器。

 以上资料只是对前端跨域做一个整理，源于B站技术蛋老师和老尚带你学前端。