接口代理之后出现错误不用代理写全地址正常

Question

vue.config.js中的配置
module.exports = {
devServer:{
host:‘localhost’,
port:8080,
publicPath:"/",
proxy:{
’/api’:{
target:‘https://www.imooc.com’,
changeOrigin:true,
secure: true,
pathRewrite:{
’/api’:’’
}
}
}
}
}
在app.vue中的
let url = “/api/activity/servicetime”;
jsonp(url,(err,res)=>{
let result = res;
this.data = result;
})
访问之后提示错误
We’re sorry but vuecli doesn’t work properly without JavaScript enabled. Please enable it to continue.（我们很抱歉，但vuecli不能正常工作没有JavaScript启用。请使其继续。）
但是不用代理 直接写接口能访问拿到数据
let url = 'https://www.imooc.com/activity/servicetime’
jsonp(url,()=>{

    })
    是能直接访问得到数据  这是什么原因，

Answer 1

河畔一角 2020-11-21 14:38:33

你没有理解什么是跨域，以及我们讲jsonp和代理的作用。 跨域是浏览器安全策略的限制，所以我们不能跨域访问其它接口，为了解决这个问题，才引入了jsonp和代理，这是两种方案，不能混用。你上面报错的那个，你用jsonp访问的，它压根就没走代理，jsonp本质上不是一个请求，它怎么会被拦截到呢？所以jsonp必须填完整的url地址，它用不了代理。代理和jsonp是两种方案，不能串用。

• 提问者 淹死De鱼 #1

  我是跟着老师你的代码  来写的  你的代码 经过代理之后  同样也是用jsonp  访问测试的  就可以访问成功

• saltedfishman 回复 提问者 淹死De鱼 #2

  代理这里确实很迷，课程里明明是用jsonp结合代理使用的，而且地址也是不完整，可以访问成功。但是老师又说jsonp不能使用代理，而且地址必须完整，这谁能理解

• 河畔一角 #3

  你们可能误会我了，我记得我讲的时候先用的jsonp发的，后来改成了axios请求走的代理，讲完代理后，又换回了jsonp填写的完整url地址，如果不是，我回去看下视频，如果不对，我给大家从新更新一下。

点开查看后面1条评论