关于axios和fetch

Question

在react中用axios发起跨域请求，发现提示“No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.”，就是跨域了，不能访问。是不是axios不支持跨域访问的？如果支持，是怎么写的？我用jquery是可以的。fetch支持跨域访问吗？怎么写的？

jquery代码是这样的：

$.ajax({
    url : 'http://m.maizuo.com/v4/api/film/coming-soon?_t='+new Date().getTime()+ '&page=1&count=3',
    type : 'GET',
    dataType : 'jsonp',
  }).done(function(data){
    console.log(data)
  })

还有，为什么要专门有方法处理axios的并发请求？像下面一样：

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));
  

我一个个来不行吗？像这样：

axios.get('/user/12345'}.then(function(res){
    console.log(res)
})
axios.get('/user/12345/permissions'}.then(function(res){
    console.log(res)
})

这两种方法有什么区别啊？

Answer 1

第一个问题，请列出你jquery的代码。

---

补充
你的jquery是用的jsonp来实现跨域请求的，但是axios的作者明确表态不支持jsonp，所以你需要把服务端改为Access-Control-Allow-Origin跨域。你后端用的什么语言，百度一下就有了

相关信息：
github-看来axios不支持JSONP调用
github-添加对JSONP请求支援

---

第二个问题。

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    console.log('两个请求都完成了')
  }));
  

axios.get('/user/12345'}.then(function(res){
    console.log('第一个请求完成了')
})
axios.get('/user/12345/permissions'}.then(function(res){
    console.log('第二个请求完成了')
})

就这个区别

Answer 2

每次数据GET到就用，那就不用axios.all。如果希望所有GET都完毕了再开始处理操作，那就用axios.all。

如果服务器端跨域的设置都弄好了（比如Access-Control-Allow-Origin），试试下面添加config的方法试试。

var config = {
       headers: {
             'Content-Type': 'application/x-www-form-urlencoded'
       },
       params: {
             param1: xxxx
       }
};

axios.post( endpoint, {}, config)
.then(function (response) {
       console.log(response);
})
.catch(function (response) {
       console.log(response);
});

Answer 3

1、本地测试的话可以直接用谷歌浏览器的插件

2、或者npm http-proxy-middleware 直接设置webpack本地代理

3、后端就太简单了，百度一大堆

Answer 4

我也遇到这个问题了，首先我是后端。

我现在使用axios post 方法就没成功过（对接本地后端项目，项目不是什么DEMO项目，而是用于生产的项目跑本地而已,也试过UAT环境）

我试过后端response 配置 Access-Control-Allow-Origin 无效

本地配置域名，然后配置nginx Access-Control-Allow-Origin 依然无效

或许不是做前端的原因，很多东西来不及时间研究，我准备换个http插件试试。

有朋友能知道原因吗？也麻烦告诉下我。

Answer 5

CORS 需要指定域名，才可以跨域，不能用通配符，就是后端需要一个“白名单”之类的处理方式。

Answer 6

用反向代理啊,就不用跨域了

Answer 7

第二个问题：那样写是 为了统一管理 数据请求， 用的时候方面模块化加载

Answer 8

在package.json文件中加下面的代码就可以了

"proxy":"http://localhost:3002"//你的服务端端口