TypeScript 快速入门

PCL学习笔记(一)-- Windows下配置安装PCL开发环境

  返回  

通过配置代理解决跨域

2021/7/21 10:33:19 浏览:

Do everything you can right now, and then decide.
全力以赴,历而后择。

直入主题

  • 首先创建vue.config.js并~加入如下配置:(红色部分)

在这里插入图片描述

  • 将上一步的配置到axios.defaults.baseURL中
    在这里插入图片描述
  • 最后,重启项目(vue.config.js重启才会被加载)注:以上两步实现配置代理,后续请求API直接填写API名称即可,前缀已配置在vue.config.js中!

知识扩展!

浏览器的同源策略:保证浏览器的安全性

给出的请求地址,若想访问另一个请求地址,前提必须满足协议、域名(主机)、端口号三个都相同(浏览器同源策略),才可以在浏览器上访问另一个请求,否则请求被拦截,怎么办呢?就需要给前者配置代理,来解决跨域问题!在这里插入图片描述
跨域简单理解,将不同协议、域名、端口下的两个请求,通过一系列配置,从而可以正常访问!

Vue未配置代理~出现的问题

  • 其一:请求状态码报405(咦,我请求携带参数格式正确啊,我都使用swagger、postman测试过了呢,怎么请求拦截呢?人品问题?)
  • 其二:控制台报错信息:Access to XMLHttpRequest at ‘http://172.20.8.24:29084/login/get_valid?mobile=17711768662’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
    在这里插入图片描述
  • 补充:swagger、postman属于工具或插件,不存在跨域问题(人家不走浏览器),所以不存在同源策略限制,当前就访问无阻!

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号