解决跨域问题

跨域的手段有很多, 主要了解3种解决方案

• JSONP

• CORS

• 服务器代理( webpack代理, Nginx反向代理 )

JSONP

经典跨域解决方案, 利用 <script> 标签不受同源策略限制的特性, 网页可以得到从其他来源动态产生的 JSON 数据, 实现跨域效果, JSONP请求一定需要对方的服务器做支持才可以。

优点

• 实现简单

• 兼容性好, 可用于解决主流浏览器的跨域数据访问的问题。

缺点

• 只支持 GET 请求 ( 因为 <script> 标签只能发送 GET 请求 )

• 存在被 XSS 攻击的可能, 缺乏安全性保证

• 需要服务端配合改造

实现

是通过动态创建 script 标签，然后通过标签的 src 属性获取 js 文件中的 js 脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，

注意

axios中不支持JSONP, 如果在开发过程中, 需要发送 JSONP 请求, 可以使用 jsonp 插件

CORS

跨域资源共享 ( CORS ) , 这是目前比较主流的跨域解决方案

CORS：跨域资源共享（CORS）是一种机制；当一个资源访问到另外一个资源(这个资源放在

不同的域名或者不同的协议或者端口)，资源就会发起一个跨域的HTTP请求需要浏览器和服务器同时支持；

1. 整个CORS通信，都是浏览器自动完成。浏览器发现了AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉；

2. 实现CORS的关键是服务器，只要服务器实现了CORS接口，就可以跨源通信

3. 服务器对于不同的请求，处理方式不一样； 有简单请求和非简单请求

注意

如果在开发或者上线中遇到了跨域问题, 在不考虑兼容性的问题下 ( IE10+ ) , 优先让后台配置个 CORS解决即可

代理服务器

同源策略是浏览器的安全策略, 服务器与浏览器之间, 没有跨域问题! 所以可以利用代理服务器转发请求!

1. 开发环境的跨域问题 ( 使用 webpack 代理服务器解决 )

   • 配置 devServer 的 proxy 配置项

   • 配置请求地址, 如果请求地址中有这个地址, 就触发代理机制

   • target配置要代理的请求地址

   • pathRewrite 路径重写

2. 生产环境的跨域问题( 使用 nginx 服务器代理 )

   • 找到 nginx 文件夹的 conf文件夹, 编译其中的 nginx.conf 文件

   • 找到 server

   • 在server中配置默认跳转路由

安全问题 ：CSRF 和 XSS攻击

CSRF（Cross-site request forgery）：跨站请求伪造。

方法一、Token 验证：（用的最多）

1. 服务器发送给客户端一个token；

2. 客户端提交的表单中带着这个token。

3. 如果这个 token 不合法，那么服务器拒绝这个请求。

方法二：隐藏令牌：

把 token 隐藏在 http 的 head头中。

方法二和方法一有点像，本质上没有太大区别，只是使用方式上有区别。

方法三、Referer 验证：

Referer 指的是页面请求来源。意思是，只接受本站的请求，服务器才做响应；如果不是，就拦截

CSRF 和 XSS 的区别

区别一：

• CSRF：需要用户先登录网站A，获取 cookie

• XSS：不需要登录。

区别二：（原理的区别）

• CSRF：是利用网站A本身的漏洞，去请求网站A的api。

• XSS：是向网站 A 注入 JS代码，然后执行 JS 里的代码，篡改网站A的内容。