处理跨域的方法有许多种。这里主要是工作中常用到的几种方式,这里总结一下。
方法一:(vue框架中使用代理的方法,来解决跨域问题。)
通过vue-cli创建的vue项目中,有一个config文件,这个文件夹中有一个index.js文件。通过修改index.js中proxy内的内容。从而实现前端项目跨域请求问题。
应用重定向的方式解决跨域问题。
而vue中,解决跨域问题,则是利用
webpack代理应用中的一个插件 webpack-dev-server,
在这个插件里,内置了一个http-procy-middleware,
这里通过http-procy-middleware方法,来处理跨域问题。
方法二: (ajax中使用JSONP,来处理跨域问题。)
jsonp方法处理,其实就是
json是一种基于文本的数据交换方式,或者叫数据描述格式。
jsonp是资料格式json的一种“使用模式”。
jsonp其实就是利用script元素的这个开放策略,网页可以得到
从其它来源动态产生的JSON资料,这种使用方式其实就是jsonp。
JSON & JSONP:JSON 是一种基于文本的数据交换方式,或者叫做数据描述格式。JSONP是资料格式JSON的一种“使用模式”,可以让网页从别的网域要资料,由于同源策略,一般来说位于server1.example.com的网页无法与不是 server1.example.com的服务器沟通,而HTML的script元素是一个例外。利用script元素的这个开放策略,网页可以得到从其他来源动态产生的JSON资料,而这种使用模式就是所谓的JSONP。
方法三: CORS访问方法,解决跨域。
Cross-Origin Resource Sharing(CORS)跨来源资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,是 JSONP 模式的现代版。与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让网页设计师用一般的 XMLHttpRequest,这种方式的错误处理比 JSONP 要来的好。另一方面,JSONP 可以在不支持 CORS 的老旧浏览器上运作。现代的浏览器都支持 CORS。
CORS是W3c工作草案,它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方,从而决定请求或响应成功与否。W3C CORS 工作草案
同源策略:是浏览器最核心也最基本的安全功能;同源指的是:同协议,同域名和同端口。精髓:认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时,它们应该只被允许访问来自同一站点的资源,而不是那些来自其它站点可能怀有恶意的资源;参考:JavaScript 的同源策略
cors 和JSONP之间的对比:
都能解决ajax直接请求普通文件时,存在的跨域无权访问的问题。
(1)、JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。
(2)、使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获取数据,比起JSONP有更好的错误处理。
(3)、JSONP主要被老的浏览器支持,它们往往不支持CORS,
而绝大多数数现代浏览器都已经支持了CORS.