近期在學習nuxt框架,爲接下來的項目做準備,
學習的目的是爲了解決單頁面應用的 SEO 的問題,因爲要做新聞網站,用服務端渲染。
以下是在網上nuxt配置實現axios代理,解決跨域的問題方案。
原筆記
1.在項目中安裝好axios
2.在nuxt.config.js裏進行配置
module.exports = {
modules: [
'@nuxtjs/axios',
],
axios: {
proxy: true,
prefix: '/api', // baseURL
credentials: true,
},
proxy: {
'/api': {
target: 'http://192.168.xxx.xxx:xxxx', // 代理地址
changeOrigin: true,
pathRewrite: {
'^/api': '', //將 /api 替換掉
},
},
}
}
3.如果需要額外配置 axios,可以通過 plugins 來進行配置。在 /plugins 目錄下增加 axios.js ,並引進配置文件。 如下:
module.exports = {
plugins: [
{ src: '~/plugins/axios' }
],
}
4.在 axios.js 文件裏就可以進行配置了,如下:
import Qs from 'qs';
export default function (app) {
let axios = app.$axios;
// 基本配置
axios.defaults.timeout = 10000;
axios.defaults.method = 'post';
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers = {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
axios.defaults.transformRequest = [function (data) {
data = Qs.stringify(data)
return data
}],
// 請求回調
axios.onRequest(config => {})
// 返回回調
axios.onResponse(res => {})
// 錯誤回調
axios.onError(error => {})
這時候我們就可以在頁面上引用了
這裏的‘api/users’ 爲 ‘https://jsonplaceholder.typicode.com/users’
最終效果