Vue-element-admin: 跨域禁止访问

[AngryCatherine]

1 后台使用的django搭建，已经发布，后台跨域的配置已经写完，使用的是 django-cors-headers，经测试使用其他的项目，用ajax去访问，可以得到后台返回的数据
2 但是使用此模板里面包装好的axios去访问后台接口，会出现跨域不允许访问，错误如下：
Failed to load http://218.69.246.194:8085/queryApi/user/info: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9528' is therefore not allowed access.
3 一顿百度之后，发现加上代理或许可以解决，代理代码如下：
proxyTable: {
'/queryApi':{
target:'http://218.69.246.194:8085/queryApi/user/info',
changeOrigin:true,//允许跨域
pathRewrite: {
'^/queryApi': '/queryApi'
}
}
后台接口地址为http://218.69.246.194:8085/queryApi/user/login
4 还是无法解决问题，最后改做代码，不使用axios，使用传统的XMLHttpRequest方法，成功调用接口，代码如下：
var xmlhttp=new XMLHttpRequest();
var url = 'http://218.69.246.194:8085/queryApi/user/info'
xmlhttp.open("GET",url,true);
xmlhttp.send();

5 最终可得到结果就是axios的问题，请问这个该如何解决啊，跪求大神答复

[PanJiaChen]

axios 加上 withCredentials: false 试试

[AngryCatherine]

我加上了，也不好用，大神还有办法么，

[PanJiaChen]

设一下 baseURL: ''

[xuwankang]

xhr.js:178 Failed to load localhost:8000****: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

[jinweijie]

服务端返回（一般浏览器先发一个OPTIONS request ）的时候服务端需返回CORS HEADER
Access-Control-Allow-Origin: * （如果允许所有跨域访问）
参考：https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

[dajiada]

1 后台使用的django搭建，已经发布，后台跨域的配置已经写完，使用的是 django-cors-headers，经测试使用其他的项目，用ajax去访问，可以得到后台返回的数据
2 但是使用此模板里面包装好的axios去访问后台接口，会出现跨域不允许访问，错误如下：
Failed to load http://218.69.246.194:8085/queryApi/user/info: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9528' is therefore not allowed access.
3 一顿百度之后，发现加上代理或许可以解决，代理代码如下：
proxyTable: {
'/queryApi':{
target:'http://218.69.246.194:8085/queryApi/user/info',
changeOrigin:true,//允许跨域
pathRewrite: {
'^/queryApi': '/queryApi'
}
}
后台接口地址为http://218.69.246.194:8085/queryApi/user/login
4 还是无法解决问题，最后改做代码，不使用axios，使用传统的XMLHttpRequest方法，成功调用接口，代码如下：
var xmlhttp=new XMLHttpRequest();
var url = 'http://218.69.246.194:8085/queryApi/user/info'
xmlhttp.open("GET",url,true);
xmlhttp.send();

5 最终可得到结果就是axios的问题，请问这个该如何解决啊，跪求大神答复

我遇到了同样的问题，请问你怎么解决的？ 谢谢

[liyongleihf2006]

这个问题是因为mock-server中express的中间件body-parser导致的，表现为不带参数请求没有问题，带上参数就出现你们上面说的那种情况，解决方案是:
1.将mock\mock-server.js文件下面的

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
  extended: true
}))

注释掉，然后到16行加上

app[mock.type](mock.url, bodyParser.json(), bodyParser.urlencoded({
  extended: true
}), mock.response)

这里希望可以帮助到大家