Vue resource get 跨域请求的加头问题

Question

已通过 postman 连接成功并取得了相关数据了，如下图：但是在Vue中也加了相关代码如下：export default {
    data(){
        return{
            cyclePic:[],
            rootUrl:this.$http.options.root,
            header:{headers:{Accept:'application/vnd.api+json',
                'Content-type':'application/vnd.api+json',
                Authorization:"**********************************"}}                     
        }
    },
    created(){
        this.getCycleList()
    },
    methods:{
        getCycleList(){
            
            this.$http.get('banner?include=field_image',this.header).then(result=>{
                console.log(result)                if(result.ok && result.status===200){
                    this.cyclePic=result.body.included
                    console.log(this.cyclePic)
                }else{
                    Toast('获取列表失败')
                }
                
            })
        }得到了一个不成功的responseResponse {url: "https://******/banner?include=field_image", ok: false, status: 0, statusText: "", headers: Headers, …}请教下，我这个header 要如何加，才是正确的方法？

Answer 1

postman不在浏览器里当然能跨域
本地html并没有跨域能力
你在开发的时候可以使用webpack中间件http-proxy-middleware，也可以用nginx做反向代理
上线后可以和api在同一个域，异域也可以让服务器返回跨域头部，还可以让服务器也做nginx反向代理

Answer 2

谢谢，现在用的框架Drupal对跨域访问做了限制，不让用了。我去看下你说的中间件，本地设置一台服务器相同环境，用Webpack开发的页面也跨域了。

Answer 3

有个概念，其它Postman这个调用应当说它没有跨域是直接请求了服务器页面，服务器返回了页面的值，跟浏览器直接浏览页面一样的得到了结果。但是开发是用了Webpack它直接生成了一台Web服务器，就成了跨域访问了。

Answer 4

开发是用了Webpack它直接生成了一台Web服务器，这个服务是本地node服务，需要配置config/index.js
dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 这里配置接口服务器地址作为反向代理
    proxyTable: {
        '/apis': {
            target: 'http://接口服务器地址', 
            secure: false, // 接受 运行在 https 上的服务
            changeOrigin: true,
            pathRewrite: {
                '^/apis': ''
            }
        }
    },
    // ...
}调用时需要在地址接口地址上加上/apis
const axiosInstance = axios.create({
    baseURL: '/apis',    
    headers: {
        'Content-Type': ''
        // ...
    }
})

Answer 5

Vue.http.interceptors.push((request,next)=>{
    request.header.set('Accept','application/vnd.api+json')
    request.header.set('Content-type','application/vnd.api+json')
    request.header.set('Authorization','Basic**********************')
    netxt((response)=>{
        return response
    })
})
在Main中加入Header，但这个set的func，未定义，不明所以呀。

Answer 6

我在webpack.config.js中加入了以下一段：
devServer:{
        proxy:{
            '/jsonapi':{
                target:'https://www.*****online',
                pathRewrite:{'^/jsonapi':'/'},
                changeOrigin:true,
                secure:false
            }
        }
    }