前端实现跨域的方式总结javascript中实现跨域的方式总结 jsonp请求；jsonp的原理是利用<script>标

javascript中实现跨域的方式总结

jsonp请求；jsonp的原理是利用

<!DOCTYPE html>
       <html>
       <head>
           <meta charset="utf-8">
       </head>
       <body>
       <div id="textID"></div>
       <script type="text/javascript">
           function text_jsonp(req){
               // 创建script的标签
               var script = document.createElement('script');
               // 拼接 url
               var url = req.url + '?callback=' + req.callback.name;
               // 赋值url
               script.src = url;
               // 放入头部
               document.getElementsByTagName('head')[0].appendChild(script);
           }
       </script>
       </body>
       </html>

document.domain；这种方式用在主域名相同子域名不同的跨域访问中
window.name；window的name属性有个特征：在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置
window.postMessage；window.postMessages是html5中实现跨域访问的一种新方式，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源。
CORS；CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是应该失败
Web Sockets；web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。

vue中实现跨域的方式总结

vue中实现跨域的话比较简单，常见的proxy来解决跨域问题，下面附上代码：

在vue.config.js中设置如下代码片段 module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { // 配置跨域 '/api':{ target:http://www.baidu.com, //请求后台接口 changeOrigin:true, // 允许跨域 pathRewrite:{ '^/api' : '' // 重写请求 } } }, } 创捷axios实例时，将baseUrl设置为 '/api',或者自行改 const http = axios.create({ timeout: 1000 * 1000000, withCredentials: true, BASE_URL: '/api' headers: { 'Content-Type': 'application/json; charset=utf-8' } })