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

Question

Vue

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

Answer 1

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

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

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

一. 用jsonp

jsonp的原理是script标签引入js是不受域名限制的, 由于是模拟插入script标签, 所以不可以用post请求
带cookies的方法参见下面设置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脚手架, 其实作者已经帮我们考虑好了, 也留了接口, 我们只需要添加几行代码即可.

安装vue-cli

npm install -g vue-cli

创建项目

vue init webpack <project-name>

这里的模版, 选择webpack, 即完整模版

配置代理

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

proxyTable: {
    '/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地址最好不要变