宝塔面板已经为网站配置header还是提示跨域,哪位知道怎么回事啊?想把百度统计数据对接到页面查看
你可以通过反向代理来解决这个问题
百度的api是在百度的服务器上,跟你宝塔里面配置header没有关系,你可以使用nginx代理实现跨域,如果是一个vue项目,你可以在vue.config.js里面配置跨域
// util.js
import axios from 'axios'
import cookies from 'vue-cookies'
import router from 'vue-router'
export const $axios = axios.create({ // 这里是配置项
timeout: 7000,
})
// 拦截请求
$axios.interceptors.request.use(
config => {
console.log(config);
let t = cookies.get('t')
if (t) {
config.headers.t = t
} else {
router.replace({path: '/login'})
}
return config
},
err => {
return Promise.reject(err)
}
)
// 拦截响应
$axios.interceptors.response.use(
response => {
console.log(response)
return response
},
err => {
console.log(err);
if (err.response) {
switch (err.response.status) {
case 401:
// 这里写清除token的代码
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath} // 登录成功后跳入浏览的当前页面
})
}
}
return Promise.reject(err)
}
)
import Vue from 'vue'
import {$axios} from './assets/lib/util'
Vue.prototype.$http = $axios
该问题的解决方式主要有以下几种:
在后端服务中添加跨域头部信息,允许前端跨域访问,例如在响应头中添加Access-Control-Allow-Origin: *
在axios中使用withCredentials属性开启跨域携带cookie,例如:
axios.get('http://example.com/', {
withCredentials: true
})
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://example.com/',
timeout: 5000,
headers: {'Access-Control-Allow-Origin': '*'}
})
其中,baseURL可填写后端服务地址,timeout可设置请求超时时间,headers可设置请求头信息。
参考资料中提到的情况1可根据实际情况进行处理,情况2需要后端也进行相应配置才能生效,情况3是目前比较常见的做法,通过新建一个axios实例进行定制化配置,避免全局配置对其他模块产生影响。