(vue解决跨域问题)blocked by CORS policy: Cross origin requests are only supported for protocol schemes

*假设服务器端发送数据的地址是:http://localhost:5000/students

*假设发送请求端的地址是:http://localhost:8080

1.配置代理服务器:

在根目录下创建vue.config.js,在vue.config.js中写入配置代理服务器的代码

module.exports = {
    //配置代理服务器
    devServer: {
      proxy: 'http://localhost:5000'
    }
  }

配置代理服务器时,写入服务器端发送数据的协议名、主机名、端口号,即:http://localhost:5000

2.发送axios请求:

//axios发送请求,请求之后返回promise值
      axios.get('http://localhost:8080/students').then(
        //请求之后给两个回调,成功的回调和失败的回调

        //成功执行:
        response=>{
          //成功之后返回来的response是响应对象,要获取值用response.data
          console.log('请求成功了,获取到了数据:',response.data)
        },
        //失败执行:
        error=>{
          //获取失败的原因用error.message
          console.log("请求失败了,失败的原因是:",error.message)
        }
      )

发送请求的地址,由原本的http://localhost:5000/students,因配置了代理服务器,变为http://localhost:8080/students

3.报错原因:跨域问题,服务器端和发送请求端的协议名、主机名、端口号必须一致,协议名http,主机名localhost,端口号前者为5000,后者为8080,因此需要配置代理服务器

4.代理服务器的原理:代理服务器配置成功后,其端口号为8080,发送请求端和服务器端都与代理服务器交互信息

***配置成功后必须重启脚手架***

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
当浏览器出现 "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource" 错误时,这是由于浏览器的同源策略所致,即浏览器限制了请求。为了解决这个问题,您可以在服务端添加一个响应头来允许请求。 如果您使用的是Node.js,可以在服务端代码中添加以下代码来设置响应头: ```javascript res.set("Access-Control-Allow-Origin", "*"); ``` 这将允许所有的名都可以进行请求。如果您只想允许特定的名进行请求,可以将"*"替换为您想要允许的名。 另外,需要注意的是,添加响应头后需要重新启动服务端,以使更改生效。 这样,当前端发送请求时,就不会再出现 "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource" 的错误了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [解决浏览器问题 “has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is ...](https://blog.csdn.net/m0_50671318/article/details/119821838)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

桃桃tao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值