No ‘Access-Control-Allow-Origin‘ header前端浏览器跨域用LiveServer处理

1.报错

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
简而言之，不允许跨域

2. 代理处理

因为是纯前端代码，我们这里使用vscode插件Live Server代理并转发接口请求，从而绕过浏览器跨域问题，安装Live Server请点击这里。

  1. 打开配置Live Server
    在这里插入图片描述

  2. 配置本地服务Host
    默认host是127.0.0.1
    在这里插入图片描述

  3. 配置本地服务端口
    默认端口不改也没问题，如需修改点击【在 settings.json 中编辑】
    在这里插入图片描述
    按照实际需求配置端口号
    在这里插入图片描述

  4. 设置代理，这一步才是代理跨域处理！！！
    跨域enable的要设为true才能使用代理，然后识别需要代理的接口路径，并设置代理的地址。
    在这里插入图片描述
    在settings.json中也能看到配置的端口和代理
    在这里插入图片描述

  5. 起本地服务，只要你路径设置正确了就可以代理解决浏览器跨域问题了
    在这里插入图片描述

版权声明：本文为wzp20092009原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。