开发环境下的跨域:在node.js上实现请求转发,前端请求到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相关的学习文档:https://forum.vuejs.org/t/vue-config-js-chainwebpack/58602
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属性.
这个应该是代码没写对,没找的问题,后来粘贴的别人的解决了.
原文地址：https://www.cnblogs.com/liruilong/p/12075856.html