Vue跨域配置proxyTable问题

最近在做一个前后端分离的毕设，在前端向后端发送get请求时遇到了Vue跨域的问题。

been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header
is present on the requested resource

解决方案如下（以vue脚手架为例）：
1、打开config文件夹里面的index.js文件，找到proxyTable参数。这个参数是vue为我们解决跨域问题专门设置的。
2、修改参数（以我的项目为例）。我原本要请求的url是后端的地址，http://localhost:8083/predict/api 但是我前端的地址是http://localhost:8080 于是产生了跨域问题。此时，只需要把proxyTable设置成如下
target表示服务器端的地址,changeOrigin表示是否跨域。
‘/predict’: {}, 就是告诉node, 我接口只要是’/predict’开头的就用代理.所以你的接口就要这么写

‘^predict’ :'predict'

表示将路径中的predict换为predict，因为我请求路径中原本就有predict所以我就不用修改，不用修改就是这么写。如果你的predict只是为了标识使用代理，实际上不存在，那就把predict替换成空，如下。

‘^predict’ :''

注意predict只是我自己的路径，不是本身就带有的参数，你需要根据自己的路径来重写。

3、修改完之后，还有一个坑，可能因为浏览器、端口存在缓存，不会立即生效，这时候可以尝试把前端的端口改一下再改回去，清除掉缓存。还是index.js文件，修改里面的port参数的数值即可。
4、npm run dev

此时，在浏览器看到的url依旧是前端的url请求，但是实际上请求会被代理至服务器端

参考文章https://blog.csdn.net/weixin_34400525/article/details/88798160
https://blog.csdn.net/ZXT149074136/article/details/100016891

Vue跨域配置proxyTable问题相关推荐

Vue跨域配置proxyTable中pathRewrite用法
跨域问题:参考平时被问到最多的问题还是关于跨域的,其实跨域问题真的不是一个很难解决的问题.这里我来简单总结一下我推荐的几种跨域解决方案. 我最推荐的也是我工作中在使用的方式就是: cors 全称为 ...
vue跨域 - 配置代理
Vue 中配置跨域的配置在 vue.config.js 文件中添加: module.exports = {devServer: {proxy: 'http://localhost:3000' // 配 ...
云e办前端项目--前端VUE跨域配置
前言一直想开发一个功能比较强大的项目,但是一直没有动手,最近终于有点时间来折腾它了.由于时隔两年没有接触前端了,所以需要一个小项目先练练手感.等这个项目完工之后在着手搞一个大工程.都说好记星不如烂笔 ...
vue使用axios请求相关配置文件包括跨域配置
对axios进行封装方便后续使用(request.js) import axios from 'axios'const request = axios.create({timeout: 5000 }) ...
vue跨域和拦截器的配置
最近项目中需要使用vue框架.虽然vue在前端开发人员里也不算是什么新鲜的事儿了.只要是搞前端的都会一些vue的操作.我也不多说,直接进入正题.(这儿我以vue2.x为例) 安装什么的,我就不在这儿说 ...
如何实现vue前端跨域，proxyTable解决开发环境前端跨域问题
如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题参考文章: (1)如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题 (2)https://www.cnblog ...
Vue+Flask前后端分离 Vue3跨域配置
Vue+Flask前后端分离 Vue3跨域配置前端端口号为8080 后端端口号为5000 问题描述问题解决接口路径映射前端端口号为8080 后端端口号为5000 后端端口API 代码片. @a ...
vue 什么是渐进式响应式意思。Vue常用的指令。VUE:跨域设置。vue router 新窗口。$router.push。
Vue 是轻量的模型视图视图模型框架.就是数据的双向开发. 数据驱动+组件化开发. 渐进式框架. 官网:cn.vuejs.org 在读 Vue2.0 文档的时候,介绍"Vue.js( ...
ASP.NET Core微服务(三)——【跨域配置】
ASP.NET Core微服务(三)--[跨域配置] 对应练习demo(跨域)下载路径(1积分):[https://download.csdn.net/download/feng8403000/151 ...

Vue跨域配置proxyTable问题

Vue跨域配置proxyTable问题相关推荐

最新文章

热门文章