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

最新推荐文章于 2024-07-08 10:53:15 发布

浅浅一笑^*^

最新推荐文章于 2024-07-08 10:53:15 发布

阅读量6k

点赞数 1

分类专栏：解决跨域的方式项目中遇到的bug 跨域使用场景文章标签： vue js java

本文链接：https://blog.csdn.net/weixin_46409887/article/details/115747544

版权

项目中遇到的bug 同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

解决跨域的方式

7 篇文章 0 订阅

订阅专栏

跨域使用场景

3 篇文章 0 订阅

订阅专栏

基础配置:(文件)
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
评论
前端请求后端接口解决跨域的几种方法?

基础配置:(文件)1.node_modules ->src文件->index.js->webpack.config.js方法:1.webpack插件总结:只能在本地使用proxy，打包上线就不会出现webpack的proxy(详细步骤)运行结果:前端服务:代码:index.js(前端写的)//import 'aaa' form 'aaa'console.log('log');//前端请求后端接口 ajaxlet xhr=new XMLHttpRequest();
复制链接

扫一扫

专栏目录