如何解决跨域问题

如何解决跨域问题

一、什么是跨域？

跨域，全称是跨域资源共享（Cross-Origin Resources Sharing ,CORS）,是浏览器的保护机制，只允许浏览器请求同一域名下的服务，同一域名的要求是协议、域名、 端口都要保持一致，只要有一项不同，都是跨域请求

简单来说，在baidu网站不能请求taobao服务器的资源，一个域到另一个域发送请求，这就造成了跨域的资源共享的问题，这个问题就是cors

二、解决方法：配置后端、配置前端、配置服务器

1.配置后端
浏览器是否开启跨域保护机制是根据后端的响应来决定的，所以配置后端是最直接的一种方法

​ 浏览器是根据“Access-Control-Allow-Origin”响应头来决定的，

​ “ * “：这个接口是可以允许所有的请求的，浏览器不会启用跨域保护机制

​ ” 域名 “：只允许指定域名的请求

​ 根据后端程序语言和库的不同，设置Access-Control-Allow-Origin的方式也不同，如果使用nodejs和express，那么可以添加cors中间件，cors默认允许所有跨域请求，如果需要指定域名才能访问，可以配置origin字段

2.配置前端

​ 在前端开发环境中配置代理，中转请求，因为跨域是浏览器的保护机制，如果脱离了浏览器发送请求， 那么就不会收到浏览器跨域保护机制的影响，这样可以使用中转服务器来发送请求和接收响应，前端只需要请求这个中转服务器，并且保持和中转服务器URL保持一致就可以了，一般脚手架都支持配置本地代理，比如vue-cli中vue.config.js里配置devSever

3.配置服务端

第三种适用于产品环境，开发服务器不支持代理的情况下，可以手动创建一个中转服务器来代理请求，比如利用express创建一个服务器，负责发送前端页面，并代理请求，当然也可以使用nginx服务端的部署工具进行代理的配置

三，至于JSONP的形式解决跨域

原理：通过src或者href请求的js脚本，css文件等文件不存在跨域问题，而只有ajax请求服务才会存在跨域问题，jsonp基于这个原理实现解决跨域，不过现在很少用，原因是

1.不适合react、vue等框架的开发

2.并且也有安全隐患