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

[e_zhiwen]

已通过 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('获取列表失败')
                }
                
            })
        }

得到了一个不成功的response

Response {url: "https://******/banner?include=field_image", ok: false, status: 0, statusText: "", headers: Headers, …}

请教下，我这个header 要如何加，才是正确的方法？

[xzxwsk]

开发是用了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': ''
// ...
}
})

[cn00439805]

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

[e_zhiwen]

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

[e_zhiwen]

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

[cn00439805]

服务器对服务器，没有跨域限制

[e_zhiwen]

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，未定义，不明所以呀。

[e_zhiwen]

引用 5 楼 xzxwsk 的回复:

开发是用了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': '' // ... } })

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