Nuxt.js解决跨域问题
我们发起请求的时候,会报错
methods: {
onCategoryClick(item) {
console.log("onCategoryClick...");
console.log(item.favorites_id);
console.log(item.favorites_title);
this.currentCategory = item.favorites_title.split('').join("<em>/</em>");
//加载数据
this.loadContentByCategory(item.favorites_id);
},
loadContentByCategory(favoriteId) {
api.getRecommendContent(favoriteId).then(result => {
if (result.code === 10000) {
this.content = result.data;
}
});
}
},
浏览器的控制台,可以看到报以下错误
Access to XMLHttpRequest at 'https://api.sunofbeach.net/shop/api//recommend/2011849237'
from origin 'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
这里说跨域了,被阻止了。为什么会这样子呢?
因为我们本地的域名是localhost,而访问的是api.sunofbeach.net
所以就跨域了
跨域在浏览器端有这样的问题,为了安全嘛。
通常我们可以通过代理的方式解决这个问题,服务器对服务器的访问是没有跨域的问题。浏览器对服务器的访问则有跨域的限制。
安装代理依赖
我们在官网这里异步请求数据
它推荐我们使用axios
我们使用 axios 重构 HTTP 请求, 我们 强烈建议您 使用我们的 axios 模块 用于您的Nuxt项目中。
也就是这个了@nuxt.js/axios
我们是直接安装了axios
能不能设置代理呢?
也是可以的嘛
按这里的提示,我们去安装一下就好
cnpm install @nuxtjs/proxy --save
或者你使用npm吧
安装完成
配置代理
在我们的nuxt.config.js中添加以下配置:
modules: [
'@nuxtjs/proxy'
],
axios: {
proxy: true,
prefix: '/union/',
credentials: true
},
proxy: {
'/union/': {
target: 'https://api.sunofbeach.net/shop/api/',
pathRewrite: {
changeOrigin: true,
'^/union/': ''
}
}
},
测试请求
我们在api里添加多一个接口
getRecommendContentByProxy(categoryId) {
return request.requestGet("/union/recommend/" + categoryId)
}
点击首页的分类tab后,我们发起请求
loadRecommendByProxy(id) {
api.getRecommendContentByProxy(id).then(result => {
console.log(result);
})
}
到这里,我们就获取到了精选的内容了。
后面我们再结合一个nginx解决这些问题,到部署的时候再告诉大家怎么样去改。