vue跨域问题解决方案_vue解决跨域问题

vue跨域问题解决方案_vue解决跨域问题用Vue-cli脚手架搭建了个demo,前后分离就有跨域问题的出现。vue-clie搭建demo步骤(传送门):https://www.cnblogs.com/wangenbo/p/8487764.html我自己在网上找了2个接口做测试:CSDN:https://www.csdn.net/api/articles?type=more&category=home&show…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

用Vue-cli脚手架搭建了个demo,前后分离就有跨域问题的出现。

vue-clie搭建demo步骤(传送门):https://www.cnblogs.com/wangenbo/p/8487764.html

我自己在网上找了2个接口做测试:

CSDN:https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false

掘金:https://suggest-follow-api-ms.juejin.im/v1/getByTag?tag=%E5%89%8D%E7%AB%AF&src=web&t=1

安装模块axios进行ajax请求,直接请求,肯定显示跨域,无法请求。

 ===============    以下为npm run dev 跨域的解决方法    ===============

vue跨域问题解决方案_vue解决跨域问题

脚手架Vue-cli已经帮我们留好了接口

参考这篇文章才知道:https://blog.csdn.net/qq_31201781/article/details/78778193

在config目录下的index.js文件,有个参数:

proxyTable:{}

所以,我把参数添加成:

vue跨域问题解决方案_vue解决跨域问题

原来接口:

CSDN:https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false

掘金:https://suggest-follow-api-ms.juejin.im/v1/getByTag?tag=%E5%89%8D%E7%AB%AF&src=web&t=1

请求链接就变成这样了:

vue跨域问题解决方案_vue解决跨域问题

vue跨域问题解决方案_vue解决跨域问题

最后,把数据打印出来,就可以了。。

vue跨域问题解决方案_vue解决跨域问题

===============    以上为npm run dev 跨域的解决方法    ===============

 

 

===============    以下为npm run build 跨域的解决方法    ===============

我们要打包上线:就用npm run build会打包成dist文件

但发到线上,就得用nginx解决跨域。

首先,下载nginx

https://blog.csdn.net/biaoge0310/article/details/78900538

入门命令:

  在ngix文件目录下执行以下命令

  start nginx  开启ngix

  nginx -s quit  退出 

  nginx -s reload 重启

        nginx -t 检查配置文件是否成功 

然后:进入nginx/conf目录下的,找到nginx.conf文件

添加如下配置:

vue跨域问题解决方案_vue解决跨域问题

启动ngix服务器: start nginx

输入网址:http://localhost:8099

完美!!!!打包后也解决了。。

===============    以上为npm run build 跨域的解决方法    ===============

 不过,nginx,只是简单配置,涉及到的负载均衡,资源配置其他问题,那得更深入学习了!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/189075.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Camunda流程引擎快速入门——Hello World示例

    Camunda流程引擎快速入门——Hello World示例一、准备工作请确保您安装了Java运行时环境8+。你可以使用终端、shell或命令行来验证:java–version二、安装部署Camunda下载camunda-bpm7.15稳定版。https://downloads.camunda.cloud/release/camunda-bpm/run/7.15/CamundaPlatformRun是CamundaPlatform的预打包发行版,包括Camundawebapps(Cockpit,Tasklist,Admin),RE

    2022年10月19日
  • intellij 激活码【最新永久激活】

    (intellij 激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html83…

  • 猴子摘香蕉_猴子香蕉游戏下载

    猴子摘香蕉_猴子香蕉游戏下载注意:不是严格按照一阶谓词逻辑写法,仅供参考题目:房内有一个猴子,一个箱子,天花板挂了一串香蕉,其位置如图所示。猴子为了拿到香蕉,它必须把箱子搬到香蕉下面,然后再爬到箱子上。请定义必要的谓词,列出问题的初始化状态(即下图所示状态),目标状态(猴子拿到了香蕉,站在箱子上,箱子位于位置b)步骤:1、定义描述环境状态的谓词AT(x,y)x在y处x={monke…

  • Java取绝对值(绝对值函数的使用方法)

    在Java中可以使用Math.abs()方法来方便的进行绝对值计算,例如:输入的是正数的时候直接返回即可,当是负数的时候返回它的相反数即可。使用三目运算符可以使用一行代码就能做到intvalue=Math.abs(-90);System.out.println(value);System.out.println(“*********”);inta=-59;System.out.println((a<0)?-a:a);…

  • 好用的在线客服系统PHP源码(开源代码+终身使用+安装教程)

    好用的在线客服系统PHP源码(开源代码+终身使用+安装教程)​在线客服系统是一套交互式沟通工具,采用PHP+MYSQL开发。高性能,不卡顿。使用它可以迅速缩小你的选择范围,联系多个供应商、客户等,也可以给你的企业一个关于用户体验的重大影响。

    2022年10月24日
  • 标准红外遥控的接收程序-松瀚汇编源程序

    标准红外遥控的接收程序-松瀚汇编源程序

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号