Galan小屋

welcome my blog

Vue 开发调试阶段如何解决跨域

By galan99

发表于 2017-04-21

Vue 开发调试阶段如何解决跨域

在开发阶段, 一般都是用webpack或者nodejs做服务器, 访问地址也都是本地IP, 和后台API对接时, 难免就遇到跨域的问题了.

一般解决方法有这么几种:

  • 用jsonp
  • 让后端设置Access-Control-Allow-Origin
  • 使用nodejs做代理

一. 用jsonp

jsonp的原理是script标签引入js是不受域名限制的, 由于是模拟插入script标签, 所以不可以用post请求 带cookies的方法参见下面设置header的方法

二. 设置header

设置header比jsonp好, 可以用post方式请求, 配合后端, 也可以携带cookies 后端添加如下header:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: www.xxx.com

如果需要携带cookies, 这里Access-Control-Allow-Origin将不可以使用泛型(即*), 同时ajax请求需要设置withCredentials = true, 代码如下:

原生ajax请求:

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://www.xxx.com/api.php", true);
xhr.withCredentials = true;
xhr.send();

使用jQuery的$.ajax:

$.ajax({
    type: "POST",
    url: "http://www.xxx.com/api.php",
    dataType: 'json',
    xhrFields: {
        withCredentials: true
    },
    crossDomain: true
}).then((json) => {
    // balabala...
})

使用vue-resource:


Vue.http.options.credentials = true;

三. 使用nodejs做代理

设置header, 又要求爷爷, 告奶奶的, 别人不给面子怎么办? 这时候就只得靠自己了.

vue-cli是vue官方出的vue脚手架, 其实作者已经帮我们考虑好了, 也留了接口, 我们只需要添加几行代码即可.


配置代理

找到项目文件夹下的config/index.js, 里面有一行proxyTable: {}, 这里就是作者为我们留的接口, 我们添加代理规则进去


dev: {
    env: require('./dev.env'),
    port: 9999,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/user': {
            target: 'http://192.168.4.124:7200',
            changeOrigin: true,
            pathRewrite: {
                '^/user': '/user'
            }
        },
        '/wpk': {
            target: 'http://192.168.4.124:7200',
            changeOrigin: true,
            pathRewrite: {
                '^/wpk': '/wpk'
            }
        }, 
        '/launcher': {
            target: 'http://www.xxx.com', // 目标域名
            changeOrigin: true,
            pathRewrite: {
                '^/launcher': '/launcher' // 规则, 见下面说明
            },
            headers: {
                'Cookie': 'SID=810q3nmoi5mfp8geb9bkm9jql0;' //这里可以设置cookies, 也可以不设置
            }
        }
    }
}

代理规则:

假如说, 后端api的地址为: http://www.xxx.com/launcher, 我们要替换成本地的http://localhost:8080/launcher, 规则只需设置’^/launcher’: ‘/launcher’, 代码最终还是要上线的, 所以除了域名外, api地址最好不要变

分类

标签