前端请求后端接口解决跨域的几种方法?

基础配置:(文件)
1.node_modules ->src文件->index.js->webpack.config.js

方法:
1.webpack插件
总结:只能在本地使用proxy,打包上线就不会出现webpack的proxy(详细步骤)

运行结果:

在这里插入图片描述
前端服务:
在这里插入图片描述
代码:
index.js(前端写的)

//import 'aaa' form 'aaa'
console.log('log');
//前端请求后端接口 ajax
let xhr=new XMLHttpRequest();
xhr.open('get','/api/user',true);//默认true(异步)false(同步) 是api的开头或者不是api的开头
//xhr.open('get','http://localhost:3000/user',true);//默认true(异步)false(同步) 后端cors的请求
//上线的时候可用单独 写一个http://localhost:3000公共的请求接口 上线时只改写这个接口就行
xhr.onload=function(){//请求成功 执行的内容
  console.log(xhr.response);
}
xhr.send();//发送请求

server.js(后端写的)

//后端接口 模拟写代码 前端调用
let express=require('express');//引入依赖包
let app=express();

//get post put delete请求方式
//后端接口是api的/api/user    不是api的接口 /user
app.get('/user',(req,res)=>{//res成功返回json的定义内容
  res.json({name:'jack'});
})
app.listen(3000,function(){//启动端口服务
  console.log('服务启动,端口3000');
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
</head>
<body>
</body>
</html>
先安装:cnpm i -S html-webpack-plugin
html-webpack-plugin的作用:
1.在内存中根据我们的index模板页面,生成一个内存里面的首页
2.当使用html-webpack-plugin之后,我们不再需要手动处理bundle.js的引用路径了,
因为这个插件,已经帮我们自动创建了一个合适的script,并且,引用了正确的路径
简要概述两个作用:
1.自动在内存中根据指定页面生成一个内存的页面
2.自动把打包好的bundle.js追加到页面中去

webpack.config.js

var path=require('path');
var htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
  entry:'./src/index.js',
  output:{
    filename:'index.js',
    path:path.resolve(__dirname,'dist'),
    publicPath:'/'
  },
  //1.webpack代理的方式解决跨域
  devServer:{
     proxy:{//代理过滤 以什么开头的  
      '/api':{//拦截/以api开头的后端地址
         target:'http://localhost:3000',
      //如果不是以api的开头,就把这个api清空,如果是就不用写以下的步骤 pathRewrite{'/api':''}
         pathRewrite:{'/api':''}
       }
     }
  },
  plugins:[//插件html-webpack-plugin:自动引入script标签中,不再需要手动处理bundle.js的引用路径了
    new htmlWebpackPlugin({//3.插件解决
      filename:'index.html',//指定生成的页面的名称
      template:'index.html'//模板
    })
  ]
}
3.下一步 安装依赖npm i express (express是node的框架 用来启动服务);
4. 运行命令执行:node server.js     运行成功   
5. 运行命令执行:npm run dev 运行成功

2.后端解决cors,前端可以随便访问,包括打包上线(详细步骤)

启动服务效果:如上图一样.就不贴这个图片了

代码:如下:
index.js

//import 'aaa' form 'aaa'
console.log('log');
//前端请求后端接口 ajax
let xhr=new XMLHttpRequest();
// xhr.open('get','/api/user',true);//默认true(异步)false(同步) 是api的开头或者不是api的开头
xhr.open('get','http://localhost:3000/user',true);//默认true(异步)false(同步) 后端cors的请求
//上线的时候可用单独 写一个http://localhost:3000公共的请求接口 上线时只改写这个接口就行
xhr.onload=function(){//请求成功 执行的内容
  console.log(xhr.response);
}
xhr.send();//发送请求

server.js

//后端接口 模拟写代码 前端调用
let express=require('express');//引入依赖包
let app=express();

//2.后端配置cors打包就ok的
var allowCrossDomain = function (req,res,next){//允许访问的请求头
  //请求源 ajax http://localhost:8080
  res.header("Access-Control-Allow-Origin","*");
  //请求头 x-token
  res.header("Access-Control-Allow-Header","*");
  //请求方法 get post put delete
  res.header("Access-Control-Allow-Methods","*");
  next();
}
app.use(allowCrossDomain);
//get post put delete请求方式
//后端接口是api的/api/user    不是/user
app.get('/user',(req,res)=>{//res成功返回json的定义内容
  res.json({name:'jack'});
})
app.listen(3000,function(){//启动端口服务
  console.log('服务启动,端口3000');
})

webpack.config.js

var path=require('path');
var htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
  entry:'./src/index.js',
  output:{
    filename:'index.js',
    path:path.resolve(__dirname,'dist'),
    publicPath:'/'
  },
  
  //解决打包后就不显示的问题(代理跨域)cors 这段代码就注销掉,cors不用这段代码
  devServer:{
    // proxy:{//代理过滤 以什么开头的
    //   '/api':{//拦截/以api开头的后端地址
    //     target:'http://localhost:3000',//如果不是以api的开头,就把这个api清空   如果是就不用写以下的步骤 pathRewrite:{'/api':''}
    //     pathRewrite:{'/api':''}
    //   }
    // }
  },
  plugins:[//插件html-webpack-plugin:自动引入script标签中,不再需要手动处理bundle.js的引用路径了
    new htmlWebpackPlugin({
      filename:'index.html',//指定生成的页面的名称
      template:'index.html'//模板
    })
  ]
}
3.执行命令:node server.js 
4.执行命令:npm run dev
5.运行成功

3.通过webpack-plugin插件的方式解决,通过webpack-dev-middleware中间介,让前端和后端的接口连接在一起,可以打包上线不影响的(详细步骤):

代码如下:
index.js

//import 'aaa' form 'aaa'
console.log('log');
//前端请求后端接口 ajax
let xhr=new XMLHttpRequest();
// xhr.open('get','/api/user',true);//默认true(异步)false(同步) 是api的开头或者不是api的开头
xhr.open('get','http://localhost:3000/user',true);//默认true(异步)false(同步) 后端cors的请求
//上线的时候可用单独 写一个http://localhost:3000公共的请求接口 上线时只改写这个接口就行
xhr.onload=function(){//请求成功 执行的内容
  console.log(xhr.response);
}
xhr.send();//发送请求

server.js

//后端接口 模拟写代码 前端调用
let express=require('express');//引入依赖包
let app=express();

//3.通过插件解决前后端连接在一起
let webpack = require('webpack');
let middle = require('webpack-dev-middleware');
let compiler = webpack(require('./webpack.config'));
app.use(middle(compiler));

//get post put delete请求方式
//后端接口是api的/api/user    不是/user
app.get('/user',(req,res)=>{//res成功返回json的定义内容
  res.json({name:'jack'});
})
app.listen(3000,function(){//启动端口服务
  console.log('服务启动,端口3000');
})

webpack.config.js

var path=require('path');
var htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
  entry:'./src/index.js',
  output:{
    filename:'index.js',
    path:path.resolve(__dirname,'dist'),
    publicPath:'/'
  },
  //webpack-plugin插件解决:
  devServer:{
    // proxy:{//代理过滤 以什么开头的
    //   '/api':{//拦截/以api开头的后端地址
    //     target:'http://localhost:3000',//如果不是以api的开头,就把这个api清空   如果是就不用写以下的步骤 pathRewrite:{'/api':''}
    //     pathRewrite:{'/api':''}
    //   }
    // }
  },
  plugins:[//插件html-webpack-plugin:自动引入script标签中,不再需要手动处理bundle.js的引用路径了
    new htmlWebpackPlugin({
      filename:'index.html',//指定生成的页面的名称
      template:'index.html'//模板
    })
  ]
}
插件版本:如下图

在这里插入图片描述

3.下载插件 cnpm i -S webpack-dev-middleware 
4.运行命令:node server.js
5.运行命令:npm run dev
6.前端接口:http://localhost:3000调用,可以不用8080来调用
7.运行成功

效果图:3000接口
在这里插入图片描述
后端:3000/user(下图所呈现的方式:安装了谷歌的插件,才会有JSON的样式)
在这里插入图片描述
谷歌的扩展插件:如下图:
在这里插入图片描述

安装需要的包: 可以一起下载
npm install webpack webpack-cli webapck-dev-server html-webpack-plugin --save-dev
-S:线上
-g:全局
-D:本地

总结:在实现的过程中会遇到版本过高或过低报错的问题,不管是webpack或webpack-cli和webpack-dev-server和webpack-dev-middleware这些都会有版本冲突,所以慢慢尝试整改,加油!!!

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值