跨域

跨域资源共享，用于让网页的受限资源能够被其他域名的页面访问的一种机制。通过该机制，页面能够自由地使用不同域名的图片、样式、脚本、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的区别，操作数据是真的很方便。

Vue聊聊跨域-模拟请求

跨域

为什么要跨域

通常我们怎么跨域

请求本地JSON文件

CORS

总结