开发环境Vue访问后端接口教程(前后端分离开发,端口不同下跨域访问) |
您所在的位置：网站首页 › vue连接后端302错误 › 开发环境Vue访问后端接口教程(前后端分离开发,端口不同下跨域访问) |
开发环境Vue访问后端接口教程(前后端分离开发,端口不同下跨域访问)
|
原理:开发环境下的跨域:在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: '', ws: true, changeOrigin: true }, '/foo': { target: '' } } } } && module.exports = { devServer: { proxy: 'http://localhost:4000' } }
proxy根本不能解决跨域，最终要跨域还是要后端配合。proxy只是前端在开发的时候，方便开发使用的东西而已，打包后就无效了。 通过后端接口调用：
参考博客: https://blog.csdn.net/csdn_chengpeng/article/details/89921958
遇到的问题: 这里是我vue.config.js里面的代码的问题,属性拼写错误.
这里是我传了字符串 过去给axios的data属性.
这个应该是代码没写对,没找的问题,后来粘贴的别人的解决了.
|
【本文地址】
今日新闻 |
推荐新闻 |