vue-cli 初始化项目时开发环境中的跨域问题
最近刚刚完成自己的毕业设计(基于Vue的信息资讯展示与管理平台),于是想整理一下过程遇到的一些问题。
项目基于Vue开发,使用 Vue-cli 初始化项目文件目录时默认占用8080端口,而我又想使用 node.js 搭建本地服务器,链接数据库获取数据实现本地模拟。搭建node服务器时也需要提供一个端口号,又不能和8080重复,我选择了使用端口8888(这个不重要,只要不是已经被占用的端口,瞎写什么都可以)。当然,这样在使用URL地址时就因为端口号不同,涉及到了跨域请求的问题。
解决这种跨域请求问题有一个简单的办法 -- 给config目录下的index.js文件添加部分代码就可以解决。
config目录下的index.js文件如图所示:

配置代码如下:

proxyTable: {
'/api': {
target: 'http://localhost:8888',
changeOrigin: true,
pathRewrite: {
'^/api':'/api'
}
}
}
target:接口的域名changeOrigin:开启代理pathRewrite:重写地址,可以看到的是使用了/api来匹配请求接口的域名,打个比方,假如接口名称是 '/api/graduate/getShowList' ,在实际请求中应该写成 '/api/graduate/getShowList' 。
vue-cli 初始化项目时开发环境中的跨域问题的更多相关文章
- Vue---vue-cli 中的proxyTable解决开发环境中的跨域问题
使用vue+vue-cli+axios+element-ui开发后台管理系统时,遇到一个问题,后台给了一个接口,我这边用axios请求数据,控制台总是报405错误和跨域错误 错误 405? 没见过!! ...
- webpack项目在开发环境中使用静态css文件
webpack项目在开发环境中使用静态css文件 在webpack项目(本人使用的 vue-cli-webpack )中,需要引入 css 或 scss等样式文件时,本人目前知道的,通常有以下几种方法 ...
- VUE在开发环境下实现跨域
1. 跨域设置 VUE项目的 config文件夹下index.js文件中修改 dev: proxyTable中的内容(默认是没有内容的): 添加内容: '/list': { target: 'http ...
- 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )
前后端分离后遇到了跨域访问的问题: angular1中使用proxy很麻烦,最后还是失败结束:最后总结3种方法如下: 本人使用的第一种方法,只是开发环境下使用很方便! 1:禁掉谷歌的安全策略(Turn ...
- vue2.0开发环境下解决跨域问题
1.找到vue 项目下的配置文件 /config/index.js 2.找到 proxyTable 配置项 proxyTable: { '/api': { target: 'http://www.xx ...
- 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)
前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...
- 开发环境中biztalk项目设置注意事项(转)
适用版本:biztalk 2006 适用环境:开发测试环境 在开发过程中,在开发环境中,一定会是一个对项目不断的修改.编译.部署.测试,查看测试结果,发现有问题,然后回到开发环境再修改.编译.部署 ...
- 开发环境Vue访问后端接口教程(前后端分离开发,端口不同下跨域访问)
原理:开发环境下的跨域:在node.js上实现请求转发,vue前端通过axios请求到node.js上,node.js将请求转发到后端,反之.响应也是,先到node.js上,然后转发vue-cil项目 ...
- 关于vue项目中axios跨域的解决方法(开发环境)
1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...
随机推荐
- 【C语言】创建一个函数,并调用比较两个数的大小
#include <stdio.h> int max(int x,int y) { if(x>=y) return x; else return y; } main() { int ...
- 将训练好的Tensorflow模型部署到web应用中
做一个简易web使用Flask是最好的选择,不仅上手快,使用也很便利.Django很强大也很好用,但一次就会创建一个项目的所需的文件,我觉得对于测试一个模型在web端有没有效果没必要用它. flask ...
- 《【架构设计之道】这一波优雅的操作,会把你的中间件系统架构带到另一个Level》阅读笔记
(1) Master-Slave架构 这个中间件系统的本质是希望能够用分布式的方式来处理一些数据,但是具体的作用涉及到核心技术,这里不能直接说明. 但是他的核心思想,就是把数据分发到很多台机器上 ...
- 3_6 环状序列(UVa1584)
长度为n的环状串有n种表示法,分别为某个位置开始顺时针得到.例如,图中的环状串有10种表示: CGAGTCAGCT,GAGTCAGCTC,AGTCAGCTCG等.在这些表示法中,字典序最小的称为“最小 ...
- [LeetCode] 735. Asteroid Collision
行星碰撞. 题意是给一个数组 asteroids,表示在同一行的行星.对于数组中的每一个元素,其绝对值表示行星的大小,正负表示行星的移动方向(正表示向右移动,负表示向左移动).每一颗行星以相同的速度移 ...
- ANSYS布尔运算APDL
目录 1.交运算 2.加运算 3.减运算 4.分割 5. 搭接 6. 互分 6.粘结 1.交运算 交运算的结果是由每个初始图元的共同部分,形成一个新的图元. 命令 功能 备注 LINL 线与线的交 A ...
- [蓝桥杯2017初赛]Excel地址
题目描述 Excel单元格的地址表示很有趣,它使用字母来表示列号. 比如,A表示第1列,B表示第2列,Z表示第26列,AA表示第27列,AB表示第28列,BA表示第53列,.... 当然Excel的最 ...
- Codeforces Global Round 5E(构造,思维)
#define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;int main(){ ios::sync_w ...
- Mysql 8.0 新特性测试
Mysql 8.0 新特性测试 Role MySQL8.0版本添加了role特性,role是一种逻辑概念是权限的集合,可以将一个或以上的权限赋予给role,再将role赋给user.Oracle,Po ...
- CSS背景图片设置
*{ margin:0px; padding:0px; list-style: none; text-decoration: none; font-family: Arial,'Microsoft Y ...