最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

vue-cli项目中的proxyTable跨域问题

来源:动视网 责编:小OO 时间:2020-11-27 20:03:33
文档

vue-cli项目中的proxyTable跨域问题

通过vue-cli脚手架搭建出来的项目,修改config文件夹下的index.js中的proxyTable就能实现。,module.exports = { dev: { env: { NODE_ENV: ';";development";';}.//proxy // 只能在开发环境中进行跨域,上线了要进行反向代理nginx设置 proxyTable: { //这里理解成用‘/api';代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用';http://40.00.100.100:3002/user/add';,需要配置这个参数 changeOrigin: true,//这个参数是用来回避跨站问题的。
推荐度:
导读通过vue-cli脚手架搭建出来的项目,修改config文件夹下的index.js中的proxyTable就能实现。,module.exports = { dev: { env: { NODE_ENV: ';";development";';}.//proxy // 只能在开发环境中进行跨域,上线了要进行反向代理nginx设置 proxyTable: { //这里理解成用‘/api';代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用';http://40.00.100.100:3002/user/add';,需要配置这个参数 changeOrigin: true,//这个参数是用来回避跨站问题的。


通过vue-cli脚手架搭建出来的项目,修改config文件夹下的index.js中的proxyTable就能实现:

module.exports = {
 dev: {
 env: {
 NODE_ENV: '"development"'
 },
 //proxy

 // 只能在开发环境中进行跨域,上线了要进行反向代理nginx设置
 proxyTable: {
 //这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add'即可
 '/api': {
 target: 'http://news.baidu.com',//你要跨域的网址 比如 'http://news.baidu.com',
 secure: true, // 如果是https接口,需要配置这个参数
 changeOrigin: true,//这个参数是用来回避跨站问题的,配置完之后发请求时会自动修改http header里面的host,但是不会修改别的
 pathRewrite: {
 '^/api': '/api'//路径的替换规则
 //这里的配置是正则表达式,以/api开头的将会被用用‘/api'替换掉,假如后台文档的接口是 /api/list/xxx
 //前端api接口写:axios.get('/api/list/xxx') , 被处理之后实际访问的是:http://news.baidu.com/api/list/xxx
 }
 }
 },

让我们用本地起的服务来测试一下如何跨域 demo

0.用vue-cli搭建的脚手架,npm run dev 前端端口号一般是:http://localhost:8080

1.修改config文件中的index.js proxyTable:{}这段代码,替换掉即可:

module.exports = {
 dev: { 
 proxyTable: {
 '/api': {
 target: 'http://localhost:8000',
 secure: true, 
 changeOrigin: true,
 pathRewrite: {
 '^/api': '/api'
 }
 }
 },

2.自己写一个后台,使用express+node.js ,不设置任何跨域头,代码如下:

注意自己需要在当前文件夹下提前准备一个list.json的文件,用来读取数据,返回数据。fs.readFile('./list.json','utf8',cb)

let express = require('express');
let app = express();
let fs = require('fs');
let list = require('./list');
let bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(express.static(__dirname));

//read
function read(cb) { //用来读取数据的,注意自己在mock文件夹下准备一些数据
 fs.readFile('./list.json','utf8',function (err,data) {
 if(err || data.length === 0){
 cb([]); // 如果有错误 或者文件没长度 就是空数组
 }else{
 cb(JSON.parse(data)); // 将读出来的内容转化成对象
 }
 })
}
//write
function write(data,cb) { // 写入内容
 fs.writeFile('./list.json',JSON.stringify(data),cb)
}
// 注意 没有设置跨域头
app.get('/api/list',function (req,res) {
 res.json(list);
});
app.listen(8000,()=>{
 console.log('8000 is ok');
});

3.前端调取的api代码:

import axios from 'axios';
 axios.interceptors.response.use((res)=>{
 return res.data; // 在这里统一拦截结果 把结果处理成res.data
});
export function getLists() {
 return axios.get('/api/list');
}

4.在组件中进行跨域调取接口,打印数据

随便在一个文件中引入api测试一下 打印出来接口返回的数据

import {getLists} from '../../api/index'
 export default {
 async created(){
 let dataList=await getLists();
 console.log(dataList,"我请求的数据");
 },

5.查看控制台,打印出数据,没有保错,代表跨域成功,代理服务成功


开发环境成功跨域了,上线怎么办?

上线要进行nginx反向代理设置,同时应区分环境变量,具体设置请看图片:

文档

vue-cli项目中的proxyTable跨域问题

通过vue-cli脚手架搭建出来的项目,修改config文件夹下的index.js中的proxyTable就能实现。,module.exports = { dev: { env: { NODE_ENV: ';";development";';}.//proxy // 只能在开发环境中进行跨域,上线了要进行反向代理nginx设置 proxyTable: { //这里理解成用‘/api';代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用';http://40.00.100.100:3002/user/add';,需要配置这个参数 changeOrigin: true,//这个参数是用来回避跨站问题的。
推荐度:
标签: VUE 问题 项目
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top