跨域问题及解决跨域的方案

同源策略：

同源 ：同一个来源  , 协议  域名  端口号 

同源策略 是浏览器的一个最基本最核心的安全机制 ， 为了保证用户数据的安全

同源策略规定了js代码的访问权限，只能访问和自己同源的页面；

 

当使用ajax或者涉及到别的跨域请求服务器数据时，受同源策略的影响 不能跨域，

因此下面列举几种跨域的解决方案（这里列举出一些常用的方法，详细内容需自己去查询文档）：

 

1.服务器代理：http-proxy-middleware

　　利用express在当前端口启动了一个小型的服务器，利用app.use（'/api',proxy({target:' ',changeOrigin:true })）

　　核心是proxy中间件；

devServer:{
        open:true,
        proxy:{
            "/ajax":{
                target:"http://m.maoyan.com",//目标服务器地址
                changeOrigin:true //默认是false,是否需要改变原始主机头部为目标的URL
            }
        }
    }

 2.nginx反向代理：

Ngine大多为http代理服务器

 3.cors跨域：

在服务器中设置header("Access-Control-Allow-Origin：* ");//表示任何域下都可以访问服务器的数据

 4.jsonp跨域：

jsonp跨域原理 ：

①动态创建script标签 添加到body中

②设置script标签的src属性 ，属性值是一个接口 ， 接口上有一个特殊参数，表示回调函数

③服务器通过对回调函数的调用  使用参数传递的方式将服务器处理的结果传回到客户端

 

jsonp接口和ajax接口区别 ： 

①jsonp的接口一定会有一个回调函数   ajax接口没有

②jsonp接口返回的数据类型是object  ajax接口返回字符串

③jsonp接口只支持get方式传递数据  路径传值