手记

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的区别,操作数据是真的很方便。

2人推荐
随时随地看视频
慕课网APP