Vue聊聊跨域-模拟请求

跨域

跨域资源共享，用于让网页的受限资源能够被其他域名的页面访问的一种机制。通过该机制，页面能够自由地使用不同域名的图片、样式、脚本、iframes以及视频。一些跨域的请求常常会被同源策略所禁止的 跨域资源共享是一份浏览器技术的规范，提供了Web 服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略。

为什么要跨域

因为现在的项目前后端进行分离，还有各种文件服务器数据库服务器可能会分开，还可能本地项目和线上项目需要联调，这些都会涉及跨域。在项目变得越来越大的时候回，文件可能会单独存放在一个服务器上，数据库可能是单独的服务器，于是项目就会请求不同的IP地址，请求不同的端口，跨域问题就出现了。

通常我们怎么跨域

（1）Charles 或者 fiddler

使用这两种工具可以帮助我们在项目开发的时候完成跨域的请求。大体思路就是将某个请求，转换成另一个请求，这种抓包工具帮我们拦截请求后，做一次转发。

可是这样，总不能线上环境装一个抓包工具吧？于是另一个俄罗斯大神的神器也能帮到我们

（2）nginx代理
我们只需要配置 Nginx 就能帮助我们完成跨域

server {
    listen 80;
    autoindex off;
    server_name caeser.com;
    access_log /usr/local/nginx/logs/access.log combined;
    index index.html index.htm index.jsp index.php;
    #error_page 404 /404.html;
    if ( $query_string ~* ".*[\;'\<\>].*" ){
        return 404;
    }

    location ~ /(caeser_fe|admin_fe)/dist/view/* {
        deny all;
    }

    location / {
        root /product/ftpfile/img/;
        add_header Access-Control-Allow-Origin *;
    }
}

（3）Vue项目中可以使用配置文件 index.js实现跨域
/config/index.js

// Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api': {
            target: 'http://localhost:8088',
            pathRewrite: {
                '^/api': '/static/mock'
            }
        },
        '/calibsys': {
            target: 'http://localhost:8080'
        }
    },

使用上述代码就能将需要转发的地址，写进项目文件当中，实现跨域请求。
上述代码的大概意思就是，将遇到的 ‘/api’ 请求全都转发到 ‘/static/mock’ 这个路径下

请求本地JSON文件

除此之外，我们在单独学习前端代码的时候发现，没有后端接口，会很难完成项目，无法达到我们想的效果，通过上述的（3）方法我们可以直接请求本地的JSON文件

axios.get('/api/menu.json').then(this.handleGetSucc)

CORS

ORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了AJAX只能同源使用的限制。

在使用 GET/HEAD/POST 的时候我们不会触发 CORES预检请求，使用
PUT/DELETE 等我们才可能用到。

---

总结

最近在自学Vue前端开发，学习npm，webpack等前端工具的使用，了解前端的特性，学习各种开发技巧，不得不说，前端的开发也是相当的艰辛，前端的框架很多，但是使用数量还是非常有难度的，而且在CSS样式和特性方面，真的很难记清楚，目前还无法做到，随心所欲的调整样式结构，实现自己想实现的页面，但是学到了很多前端开发的技巧，了解的操作数据和操作DOM的区别，操作数据是真的很方便。