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&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-cli已经帮我们留好了接口

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

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

proxyTable:{}

所以,我把参数添加成:

 

 原来接口:

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

请求链接就变成这样了:

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

===============    以上为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文件

添加如下配置:

启动ngix服务器: start nginx

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

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

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

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

原文地址:https://www.cnblogs.com/xiaoxiaossrs/p/8902535.html

时间: 2024-10-10 12:33:06

vue前后端分离解决跨域问题的相关文章

【js】【跨域问题】前后端分离的跨域问题

最近在研究nodejs,php的前后端分离相关东西,在调用接口的时候碰到一些跨域的问题,经过一段时间的摸索,总结出来的一些东西 php采用的是yii框架,登录的机制或者调用接口都需要前端传递cookie进去,但是nodejs的axios接口等默认是不会传递cookie的 跨域解析:浏览器请求非本域名的网站资源,如果目标服务器没有设置跨域的情况下,浏览器是会阻止用户的请求的 跨域的解决途径:可以配置后端服务转发的机制绕开跨域问题:也可以直接配置目标服务器的跨域配置 配置转发 搭建一个和前端处于同一

前后端分离之跨域问题

最近在做的一个项目,原本是通过SpringMVC结合freemarker模板引擎和JSP实现HTML页面和后端的数据交互,现在为了业务需要,要将前后端拆分出来.使用Restful API的形式进行交互.然后刚上路就遇到坑了,在这里记录一下如何填坑,以防不时之需.这里介绍的方法是SpringMVC架构通过CROS协议解决跨域问题. 错误信息 Response to preflight request doesn't pass access control check: No 'Access-Con

前后端分离,跨域问题

解决跨域问题 1. 什么是跨域 1.1.不同域名的资源访问,存在跨域 1.2.同一个域名不同端口的资源访问,也属于跨域 1.3二级域名不同的资源访问,也属于跨域 只要域名(ip)和端口号有一样不同,那么都是跨域 http://localhost:8080 前端系统 发送Ajax取后端系统获取数据 http://localhost:80   后端系统 以上的两个地址也是跨域 2.跨域问题 跨域不一定会有跨域问题. 因为跨域问题是浏览器对于ajax请求的一种安全限制,也可以说是浏览器的同源策略 同源

解决傻瓜式前后端分离前端跨域访问的问题

版本号49之后的chrome跨域设置chrome的版本升到49之后,跨域设置比以前严格了,在打开命令上加--disable-web-security之后还需要给出新的用户个人信息的目录.众所周知chrome是需要用gmail地址登录的浏览器,登录后就会生成一个存储个人信息的目录,保存用户的收藏.历史记录等个人信息.49版本之后,如果设置chrome浏览器为支持跨域模式,需要指定出一个个人信息目录,而不能使用默认的目录,估计是chrome浏览器怕用户勿使用跨域模式泄露自己的个人信息(主要是cook

前后端分离 ajax 跨域 session 传值 (后端使用 node)

前端:ajax访问时要加上"xhrFields: {withCredentials: true}" ,实现session可以传递 后端:Access-Control-Allow-Credentials 设置为 true:同时 Access-Control-Allow-Origin 必须指定 url npm 安装 express.body-parser.express-session.svg-captcha 后台代码: 1 var express = require('express')

前后端分离开发,跨域访问的apche设置

1,如何让Apache支持跨域访问呢? 步骤: 修改httpd.conf,windows中对应的目录是:C:\wamp\bin\apache\Apache2.4.4\conf\httpd.conf 把LoadModule headers_module modules/mod_headers.so 前面的注释删除 修改  改为:  即: <Directory />    AllowOverride none    Require all granted    Header set Access-

前后端分离的跨域请求问题解决

因为工作中接触到了,就记录下来. 主要是两个jar包的使用 可以自己看看源码或是其他对内部方法讲解的资料. web.xml配置. 原文地址:https://www.cnblogs.com/helloworld-yjh/p/9689465.html

vue+springboot前后端分离工程中跨域问题的解决

vue+springboot前后端分离工程中跨域问题的解决 假如是在同一台机器上开发,前后端分离的工程中出现跨域问题的原因是,前端工程和后端工程运行在不同的端口上.只要协议.域名.端口有一个不同就会产生跨域问题,所以在前端工程中请求后端的接口时就会因为端口不同而产生跨域问题. 一.解决跨域的原理 假设前端A要去访问服务器C,可以在A和C之间之间设置一个代理B,A访问C时先访问B,再由B代为请求C并把请求结果返回给A,这样就可以解决跨域问题.其中需要保证的是A访问B和B访问C都不能存在跨域. 二.

python 记录Django与Vue前后端分离项目搭建

python 记录Django与Vue前后端分离项目搭建 参考链接: https://blog.csdn.net/liuyukuan/article/details/70477095 1. 安装python与vue 2. 创建Django项目 django-admin startproject ulb_manager 3. 进入项目并创建名为backeng的app cd ulb_manager   python manage.py startapp backend 4. 使用vue-cli创建v