vue+Java后端进行调试时解决跨域问题的方式

今天在开发过程中遇到一个问题，拿到了一套vue代码，计划对这套代码的部分样式进行调整，Java后端代码已经写好并且部署到了线上。这时命令行运行vue项目时访问会受限，取不下数据来，遇到了跨域访问失败的问题，这时可以怎么做呢？

首先，要了解什么叫跨域访问？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

所谓同源是指，域名，协议，端口均相同，举个例子：

http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）

http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

知道了跨域的概念之后我们如何解决他呢？

我这里的情况是这样的，后端在服务器上，但是vue在本地运行，网上有很多的跨域代理工具，但是都比较麻烦。因为vue-cli 脚手架工具已经帮我们做了处理，只需要稍微配置一下，就可以轻松解决跨域问题。

我们打开 config/index.js 文件，找到以下代码：

在proxyTable: {}配置代理，配置信息如下：

proxyTable: {
 '/project_dzff/': {
 target: 'http://120.92.45.71/', //域名
 secure: false,
 changeOrigin: false,
 }
 },

代理配置之后，再去修改项目的调用接口地址的信息，让他调用我们配置好的东西。

serverRoot: env === 'development' ? '/project_dzff' :
env === 'production' ? '/project_dzff' :
'https://debug.url.com'

这里由原先访问http://120.92.45.71/调整为访问project_deff，即我们自己定义的名字了。

这时我们运行vue项目，如图：

这时基本上访问已经成功代理到本地了，这时就可以使用本地的vue项目访问服务器端的数据了！

总结

赞 (0)

相关推荐

  • vue proxyTable 接口跨域请求调试的示例

    vue proxyTable 接口跨域请求调试的示例

    在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable: 在 config/index.js 配置文件中 dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', //proxyTable: {}, proxyTable: proxyConfig.pro

  • vue+Java后端进行调试时解决跨域问题的方式

    vue+Java后端进行调试时解决跨域问题的方式

    今天在开发过程中遇到一个问题,拿到了一套vue代码,计划对这套代码的部分样式进行调整,Java后端代码已经写好并且部署到了线上.这时命令行运行vue项目时访问会受限,取不下数据来,遇到了跨域访问失败的问题,这时可以怎么做呢? 首先,要了解什么叫跨域访问? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 所谓同源是指,域名,协议,端口均相同,举个例子: http://www.123.com/index.html 调用 http

  • SpringBoot+Vue前后端分离实现请求api跨域问题

    前言 最近过年在家无聊,刚好有大把时间学习Vue,顺便做了一个增删查改+关键字匹配+分页的小dome,可是使用Vue请求后端提供的Api的时候确发现一个大问题,前后端分离了,但是请求的时候也就必定会有跨域这种问题,那如何解决呢? 前端解决方案 思路:由于Vue现在大多数项目但是用脚手架快速搭建的,所以我们可以直接在项目中创建一个vue.config.js的配置文件,然后在里面配置proxy代理来解决,话不多说,直接上代码 module.exports = { devServer: { proxy

  • vue中proxy代理的用法(解决跨域问题)

    目录 声明 1. 首先我们应该知道 2. 跨域,什么是跨域呢? 问题 跨域的解决方案 代理服务器是如何解决跨域的? proxy配置 以vue cli3.0为例 总结 声明 1. 首先我们应该知道 前端axios在本地发送的请求如果你不把路径写全,它都是会默认加上自己项目所在的端口,就比如说: axios.get('/login') axios.get('/hello') 当我点击发送按钮之后,以上两行代码实际为: http://localhost:8080/login http://localh

  • vue服务器代理proxyTable配置如何解决跨域

    vue服务器代理proxyTable配置如何解决跨域

    目录 服务器代理proxyTable配置解决跨域 1.Proxy代理作用 2 .常见情况 3.应用方式 4.具体配置实例 5.配置思路 Vue.proxyTable是什么? 为什么会有proxyTable存在? 配置proxyTable 服务器代理proxyTable配置解决跨域 1.Proxy代理作用 proxy代理作用:前端服务器代理的作用是,告诉服务器任何未知请求(没有匹配到静态文件的请求),代理到一个另一个地址,从而解决跨域的问题. 2 .常见情况 前端在向后端进行资源请求的时候,后端若

  • vue项目实现webpack配置代理,解决跨域问题

    vue项目实现webpack配置代理,解决跨域问题

    目录 webpack配置代理,解决跨域 主要是这句话 vue跨域问题,修改代理后仍404 接口请求用法 webpack配置代理,解决跨域 在config文件夹中的index.js文件配置 主要是这句话 proxyTable: { //本地测试接口       '/': {          target: 'http://xx.xx.xx.xx',          changeOrigin: true,          secure: false      }  }, ​示例代码: modu

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • vue.js使用代理和使用Nginx来解决跨域的问题

    vue.js使用代理和使用Nginx来解决跨域的问题

    使用Nginx 反向代理解决跨域问题(vue.js使用代理去掉vue.js因为跨域而触发的options请求) 我们的项目还是需要node.js作为容器的 一.Windows 下安装Nginx (官网下载稳定版http://nginx.org/en/download.html) 二.修改config里的nginx.conf文件的server server { listen 8899;// 你的端口 server_name localhost; root C:/ZOBSF_F/dist;//你打包

  • Angular4开发解决跨域问题详解

    1.跨域 浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了. 上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同 同源策略: 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同. 比如:我在本地上的域名是study.cn,请求另外一个域名一段数据,这个时候在浏览器上会报错,这个就是同源策略的保护,如果浏览器对javascri

  • java后端解决跨域的几种问题解决

    1.java过滤器过滤 允许整个项目跨域访问,可通过filter来进行过虑: public class SimpleCORSFilter implements Filter{ @Override public void destroy() { } @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletExceptio

  • springboot解决前后端分离时的跨域问题

    随着分布式微服务的兴起,越来越多的公司在开发web项目的时候选择前后端分离的模式开发,前后端分开部署,使得分工更加明确,彻底解放了前端. 我们知道,http请求都是无状态,现在比较流行的都是jwt的形式处理无状态的请求,在请求头上带上认证参数(token等),前后端分离有好处,也有坏处,第一次开发前后端分离项目的人,肯定会遇到前端请求跨域的问题,这个怎么处理呢?在说处理方案前,有必要说明一下为什么会跨域和什么是跨域? 一.为什么会跨域? 出于浏览器的同源策略限制.同源策略(Sameoriginp

随机推荐