原理:
开发环境下的跨域:在node.js上实现请求转发,vue前端通过axios请求到node.js上,node.js将请求转发到后端,反之.响应也是,先到node.js上,然后转发vue-cil项目上.

需要在根目录下新建文件vue.config.js.

vue.config.js:

  vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。

devServer.proxy

  • Type: string | Object

    如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

 

在一个vue文件中export const可以有多个,但是export default只有且仅有一个

具体流程:

一般前端访问接口通过axios实现,可以对请求进行整体的封装,返回一个配置好的axios对象,也可以对直接调用axios的具体方法.

axios相关的学习文档:http://www.axios-js.com/docs/

axios({
// `url` 是用于请求的服务器 URL
url: '/user', // `method` 是创建请求时使用的方法
method: 'get', // 默认是 get // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: 'https://some-domain.com/api/', // `transformRequest` 允许在向服务器发送前,修改请求数据
// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
transformRequest: [function (data) {
// 对 data 进行任意转换处理 return data;
}], // `transformResponse` 在传递给 then/catch 前,允许修改响应数据
transformResponse: [function (data) {
// 对 data 进行任意转换处理 return data;
}], // `headers` 是即将被发送的自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'}, // `params` 是即将与请求一起发送的 URL 参数
// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
params: {
ID: 12345
}, // `paramsSerializer` 是一个负责 `params` 序列化的函数
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
}, // `data` 是作为请求主体被发送的数据
// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
// 在没有设置 `transformRequest` 时,必须是以下类型之一:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属:FormData, File, Blob
// - Node 专属: Stream
data: {
firstName: 'Fred'
}, // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 `timeout` 的时间,请求将被中断
timeout: 1000, // `withCredentials` 表示跨域请求时是否需要使用凭证
withCredentials: false, // 默认的 // `adapter` 允许自定义处理请求,以使测试更轻松
// 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
adapter: function (config) {
/* ... */
}, // `auth` 表示应该使用 HTTP 基础验证,并提供凭据
// 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
auth: {
username: 'janedoe',
password: 's00pers3cret'
}, // `responseType` 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // 默认的
................
})

根目录下新建vue.config.js 配置文件:

devServer.proxy的学习文档:https://cli.vuejs.org/zh/config/#css-loaderoptions

module.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
} && module.exports = {
devServer: {
proxy: 'http://localhost:4000'
}
}

proxy根本不能解决跨域,最终要跨域还是要后端配合。proxy只是前端在开发的时候,方便开发使用的东西而已,打包后就无效了。

 通过后端接口调用:

参考博客:

https://blog.csdn.net/csdn_chengpeng/article/details/89921958

遇到的问题:


 这里是我vue.config.js里面的代码的问题,属性拼写错误.

 这里是我传了字符串 过去给axios的data属性.

 这个应该是代码没写对,没找的问题,后来粘贴的别人的解决了.


 

开发环境Vue访问后端接口教程(前后端分离开发,端口不同下跨域访问)的更多相关文章

  1. vue-cli 3.0 使用axios配置跨域访问豆瓣接口

    vue-cli 3.0 配置axios跨域访问豆瓣接口 自己做的小demo 由于豆瓣api跨域问题,因此不能直接通过ajax请求访问,我们通过vue-cli提供给我们的代理 进行配置即可, 在根目录下 ...

  2. 配置Nginx和Apache允许指定域名CORS跨域访问

    前后端分离开发,导致前端项目需要跨域请求后端接口,解决方法有很多,本文只介绍两个: 1. 修改后端程序代码实现允许跨域请求 2. 修改服务器配置文件实现允许跨域请求 正文: 方法1:修改后端程序代码实 ...

  3. 详解SpringBoot应用跨域访问解决方案

    一.什么是跨域访问 说到跨域访问,必须先解释一个名词:同源策略.所谓同源策略就是在浏览器端出于安全考量,向服务端发起请求必须满足:协议相同.Host(ip)相同.端口相同的条件,否则访问将被禁止,该访 ...

  4. Jsonp跨域访问

    很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...

  5. Ajax跨域访问问题-方法大全

    Case I. Web代理的方式 (on Server A) 即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面,由该页面代替用户页面完成交互,从而返回合适的结果.此方案可以解决 ...

  6. 【转】silverlight 跨域访问

    作者:MIDI  来源:博客园  发布时间:2010-01-01 17:39  阅读:204 次  原文链接   [收藏]    在 Silverlight 使用 WebService .WCF.We ...

  7. Spring Boot 跨域访问

    如何在 Spring Boot 中配置跨域访问呢? Spring Boot 提供了对 CORS 的支持,您可以实现WebMvcConfigurer 接口,重写addCorsMappings 方法来添加 ...

  8. GoodReader跨域访问HT for Web手册

    最近下载了GoodReader App,发现GoodReader中打开的页面不仅支持WebGL,同时还允许跨域访问资源,以前不少HT for Web手册的例子需要Web服务器发布的方式才能访问,否则需 ...

  9. IFrame跨域访问自定义高度

    由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 ...

随机推荐

  1. Linux 内核 usb_control_msg 接口

    usb_control_msg 函数就像 usb_bulk_msg 函数, 除了它允许一个驱动发送和结束 USB 控制信息: int usb_control_msg(struct usb_device ...

  2. Fetch 记录

    encodeURI()不会对本身属于URI的特殊字符进行编码,例如冒号.正斜杠.问号和井字号:而encodeURIComponent()则会对它发现的任何非标准字符进行编码. Fetch 请求body ...

  3. CF1208

    CF1208 打的话貌似能够涨分的样子? A 水题 B 枚举左端点,看看右端点的最近位置 开一个类似于桶的东西维护一下上一次出现位置 左端点左边就删掉,否则就要将上一次出现的位置删掉 时间复杂度\(O ...

  4. CF1137 C. Museums Tour

    CF1137 C. Museums Tour 一般来说的正常思路:看到有向图的第一思路都是缩点(但是要分析一波证明强联通分量中的个体可以拼凑成整体,一般都是边和点可以经过无数次然后贡献只算一次这种类型 ...

  5. Sybase commands

    (1)update table statistics $table name if we change index info for a table ,such as create or drop i ...

  6. Linux: 在某个路径及其子目录下查找所有包含“hello abcserver”字符串的文件。

    find /etc -name “*” | xargs grep “hello abcserver” 在 / 及其子目录下查找所有包含UNEXPECTED_SCHEMA find /  -name * ...

  7. 记录我的 python 学习历程-Day11 两个被忽视的坑、补充知识点、函数名的应用、新版格式化输出、迭代器

    补充知识点 函数形参中默认参数的陷阱 针对不可变数据类型,它是没有陷阱的 def func(name, sex='男'): print(name) print(sex) func('Dylan') # ...

  8. redis集群数据迁移

    redis集群数据备份迁移方案 n  迁移环境描述及分析 当前我们面临的数据迁移环境是:集群->集群. 源集群: 源集群为6节点,3主3备 主 备 192.168.112.33:8001 192 ...

  9. “Deep models under the GAN: information leakage from collaborative deep learning”阅读笔记

    一.摘要 指出深度学习在机器学习场景下的优势,以及深度学习快速崛起的原因.随后点出研究者对于深度学习隐私问题的考虑.作者提出了一种强力的攻击方法,在其攻击下任何分布式.联邦式.或者中心化的深度学习方法 ...

  10. 1209. Construct the Rectangle

    1209. Construct the Rectangle class Solution { public: /** * @param area: web page’s area * @retur ...