axios请求百度统计api跨域

img

img

img

宝塔面板已经为网站配置header还是提示跨域,哪位知道怎么回事啊?想把百度统计数据对接到页面查看

你可以通过反向代理来解决这个问题

百度的api是在百度的服务器上,跟你宝塔里面配置header没有关系,你可以使用nginx代理实现跨域,如果是一个vue项目,你可以在vue.config.js里面配置跨域

  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7626598
  • 这篇博客也不错, 你可以看下axios 请求后端接口设置请求头header
  • 除此之外, 这篇博客: axios实现拦截器中的 项目中通常使用token进行用户权限认证,需要在请求的header中添加token信息进行验证,拦截返回的状态码进行跳转或重新登陆,在全局配置这些不妥,所以新建一个axios实例进行项目的配置。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • // 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
  • 以下回答由chatgpt基于相关博客总结生成:

    该问题的解决方式主要有以下几种:

    1. 在后端服务中添加跨域头部信息,允许前端跨域访问,例如在响应头中添加Access-Control-Allow-Origin: *

    2. 在axios中使用withCredentials属性开启跨域携带cookie,例如:

    axios.get('http://example.com/', {
      withCredentials: true
    })
    
    1. 新建一个axios实例进行项目的配置,避免在全局配置拦截器等不必要的信息,例如:
    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实例进行定制化配置,避免全局配置对其他模块产生影响。