vue-cli4.x 中配置允许跨域请求

在项目根目录下创建vue.config.js文件：

vue.config.js:

module.exports = {devServer: {host: 'localhost',port: 8080,https: false,open: false, // 配置自动启动浏览器hotOnly: true, // 是否热更新proxy: {'/api': { // 路径中有 /api 的请求都会走这个代理target: 'http://127.0.0.1:5000/api/', // 要访问的接口域名ws: true, // 是否启用  websockets// secure: false,changeOrigin: true,// 开启代理：在本地会创建一个虚拟服务端，// 然后发送请求的数据，并同时接收请求的数据，// 这样服务端和服务端进行数据的交互就不会有跨域问题pathRewrite: {'^/api': '' // 这里理解成用/api代替target里面的地址，即去掉路径中的/api  的这一截}}}}
}

/api实际上是一层拦截，当我们前端访问到这个路由时，会自动代理到我们taregt中的内容，然后将

changeOrigin改为true，这句话的意思时是否将主机头的原点更改为目标的请求头。pathRewrite是将api路由地址更改为某一个值，我们这里给空。

我们这里的服务器使用的是nodejs，且端口为5000，我们web项目服务器端口为8080，因此这里web端访问服务器时就会跨域。

由上图课之，请求成功了，解决了跨域问题，接着我们再看一下Request URL中的内容，我们发现这里的主机名以及端口都是我们前端web服务器的。就好像这个接口是我们同源下的接口，然后内部实际上访问的是http://127.0.0.1:5000/api/users/register

vue-cli4.x 中配置允许跨域请求相关推荐

一步步教你前端vue项目开发中如何解决跨域问题
文章目录开发环境中跨域名词解释 1.同源策略: 2.同源: 3.跨域: 4.代理服务器: 解决方式项目背景跨域配置 1.配置说明: A.参数proxy详解: B.pathRewrite详解: ...
vue中使用axios跨域请求
vue中使用axios请求API或其他域名地址时,会产生跨域请求问题,应该如何解决呢?(本文以请求API为例) 解决方法: 1.为axios设置请求头.拦截器等,这里直接对axios进行封装,将其封装 ...
vue服务器代理proxyTable配置解决跨域
目录 1.Proxy代理作用 2 .常见情况 3.应用方式 4.具体配置实例 5.配置思路代理原理总结 1.Proxy代理作用 proxy代理作用:前端服务器代理的作用是,告诉服务器任何未知请求( ...
ajax请求头cookies中传递sid,跨域请求单点登录，登录成功，但是在controller中获取的cookie与浏览器中不一致，请大神指点一二。^_^...
跨域请求js代码: $.ajax({ type:"post", async:false, contentType : "application/x-www-form-ur ...
ng配置解决跨域请求
问题概述前端h5请求后端服务,两者的域名不同,报出这样的错误 No 'Access-Control-Allow-Origin' header is present on the requested ...
html中jsonp错误,解决jquery中jsonp格式跨域请求报parsererror的错误
在vs中创建一个空的mvc项目,在Controllers文件夹中添加一个控制器CommonController,并在该控制器下添加一个action用于获取服务器时间,代码如下: public Acti ...
Kratos配置允许跨域请求头中间件
中间件代码: //MiddlewareCors 设置跨域请求头 func MiddlewareCors() middleware.Middleware {return func(handler mid ...
axios代理跨域 cli4_vuecli 3.0之跨域请求代理配置及axios路径配置莫小龙
vue-cli 3.0之跨域请求代理配置及axios路径配置问题:在前后端分离的跨域请求中,报跨域问题配置: vue.config.js: module.exports = { runtimeCo ...
jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...

vue-cli4.x 中配置允许跨域请求

vue-cli4.x 中配置允许跨域请求相关推荐

最新文章

热门文章

vue-cli4.x 中 配置允许跨域请求

vue-cli4.x 中 配置允许跨域请求相关推荐

最新文章

热门文章

vue-cli4.x 中配置允许跨域请求

vue-cli4.x 中配置允许跨域请求相关推荐