前端交互之“解决前端跨域的三种方法”

空投在我怀里

已于 2022-05-09 19:22:39 修改

阅读量5.3k

点赞数 1

分类专栏：前端接口交互文章标签： vue 前端跨域 ajax axios

于 2022-05-08 21:47:04 首次发布

本文链接：https://blog.csdn.net/wrk2466836002/article/details/124654012

版权

前端接口交互专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.什么是前端跨域？

跨域是浏览器为了安全而做出的限制策略：浏览器请求必须遵从同源测试：
http://www.bilibili.com:8080：/anime/?key=calue路径键值对
同协议、同域名、同端口

2.ajax和fetch访问接口都会有跨域问题！

3.跨域造成的问题？

a.无法读取非同源网页的cookie、localStorage和indexedDB
b.无法接触非同源网页的DOM
c.无法向非同源地址发送ajax请求

一、CORS跨域-前端最省事（大部分网站不会使用，不安全）

1.概念：CORS是一个W3C标准，全称是"跨域资源共享"，允许跨域带入cookid

2.原理：它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制

3.操作：服务端设置，前端直接调用，后台允许前端某个站点进行访问

如图：在”响应请求“里面，只允许http://www.http.com域名进行跨域，*符文是允许所有

// this.$axios.get("http://localhost:5000/students").then((response) => {
    //   console.log(response);
    // });//请求会报跨域错误

	// 解决方法1 cors跨域
	// this.$axios.get("http://localhost:5000/students").then((response) => {
    //   console.log(response);
    // });
	//在服务器中app.get('/students',(request,response)=>{
		//response.header("Access-Control-Allow-Origin","*")//后端添加后，可以进行跨域
	//}

	//cors跨域
	// this.$axios.get("https://api.github.com/search/users?q=%E6%88%91").then((response) => {
    //   console.log(response);
    // });

后端代码

const express = require('express')
const app = express()

app.use((request,response,next)=>{
	console.log('有人请求服务器1了');
	// console.log('请求来自于',request.get('Host'));
	// console.log('请求的地址',request.url);
	next()
})

//修改响应头
app.get('/students',(request,response)=>{
	response.header("Access-Control-Allow-Origin","*")//后端添加后，可以进行跨域
	const students = [
		{id:'001',name:'tom',age:18},
		{id:'002',name:'jerry',age:19},
		{id:'003',name:'tony',age:120},
	]
	response.send(students)
})

app.listen(5000,(err)=>{
	if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');
})

二、jsonp跨域（目前非常流行）

1.原理：最早的解决方案，利用script标签可以跨域的原理实现

在script标签引用了别的源，不会出现跨域问题，设计标签的时候，就允许在别的源请求脚本

HTML5里的script标签默认的type属性是text/javascript,浏览器，就会以js代码来进行执行

2.限制：需要服务的支持、只能发起GET请求

3.优势：

a.在于支持老式浏览器，以及可以向不支持CORS的网站请求数据

b.它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，JSONP可以跨越同源策略

4.缺点：

a.它只支持GET请求而不支持POST等其它类型的HTTP请求

b.它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

c. jsonp在调用失败的时候不会返回各种HTTP状态码

d.缺点是安全性。万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？所有调用这个 jsonp的网站都会存在漏洞,于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的。

<!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>Document</title>
</head>
<body>
</body>
</html>
<script>
//1.jsonp实现原理-封装写法
function jsonp(req){
    var script = document.createElement('script');
    var url = req.url + '?callback=' + req.callback.name;
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script); 
}

const students = [
		{id:'001',name:'tom',age:18},
		{id:'002',name:'jerry',age:19},
		{id:'003',name:'tony',age:120},
	]

function hello(res){
    // alert('hello ' + res);
    console.log(res)
}

// hello(students)
jsonp({
    url : 'http://localhost:5000/students',
    callback : hello 
});


</script>

<!-- 2.jsonp的原始写法 -->
<!-- <script src="http://localhost:5000/students?callback=hello"></script> -->

后端代码

const express = require('express')
const app = express()

app.use((request,response,next)=>{
	console.log('有人请求服务器1了');
	// console.log('请求来自于',request.get('Host'));
	// console.log('请求的地址',request.url);
	next()
})

app.get('/students',(request,response)=>{
	var funcname = request.query.callback;//获取
 //console.log('内容',funcname + "(students)");
	const students = [
		{id:'001',name:'tom',age:18},
		{id:'002',name:'jerry',age:19},
		{id:'003',name:'tony',age:120},
	]

	//response.send(funcname + "('你好')")//单个数据
	//response.send(funcname + '(' + JSON.stringify(students) + ')')//转为json数据-多个数据
	//fun([{id:'001',name:'tom',age:18},...])
	//原理是src不受跨域影响，所以让后台返回一个js文件,js里的代码包含数据
	//response.send(students)
})

app.listen(5000,(err)=>{
	if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');
})

注意：vue中的“axios默认是没有jsonp 跨域请求的方法的。一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息。
例如java中的 header,response.setHeader("Access-Control-Allow-Origin", www.allow-domain.com) 也就是CORS跨域
但是很多时候,后台出于一些原因不想修改或者已经写好jsonp的接口需要适应不同平台,此时,前端就可以单独引入依赖解决该问题了

vue安装jsonp跨域：

 npm install jsonp -S

新建一个文件jsonp.js

// 引入原始jsonp插件
import originJsonp from 'jsonp'
/*
 封装原jsonp插件，返回promise对象
 url： 请求地址
 data：请求的json参数
 option：其他json参数，默认直接写空对象即可
*/
export default function jsonp (url, data, option) {
 url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
 return new Promise((resolve, reject) => {
 // originJsonp中的参数说明可以到前言中的github中查看
  originJsonp(url, option, (err, data) => {
   if (!err) {
    resolve(data)
   } else {
    reject(err)
   }
  })
 })
}
/*
 封装url参数的拼接
 */
function param (data) {
 let url = ''
 for (var k in data) {
  let value = data[k] !== undefined ? data[k] : ''
  // 防止参数为中文时出现乱码，把字符串作为 URI 组件进行编码
  url += `&${k}=${encodeURIComponent(value)}`
 }
 return url ? url.substring(1) : ''
}

在api文件目录下新建getCurrentCity.js

// 引入封装好的jsonp
import jsonp from '../jsonp'
// 假设这里为跨域请求当前城市的接口
export function getCurrentCity () {
 // 接口地址
 let url = 'https://www.imooc.com/carts'
 // 所需参数
 let datas = {
  'qt': 'dec',
  'ie': 'utf-8',
  'oue': 1,
  'fromproduct': 'jsapi',
  'res': 'api',
  'ak': 'QWilijLzYd6pCmTrHilAeWjbG41zMiXc'
 }
 return jsonp(url, datas, {})
}

使用：

// import {getCurrentCity} from './getCurrentCity'//jsonp跨域 引入地址

    mounted(){
      this._getCurrentCity ()
    },
    methods:{
      _getCurrentCity (){
        // getCurrentCity().then((res) => {//引用地址
        // // 打印出获取到的数据
        //  console.log(123)
        //  console.log(res)
        // }).catch((err) => {
        //   console.log(err)
        // })//jsonp跨域
      },

三、代理跨域-需要建一个vue.config.js-最安全的

1.最安全-最省事-前后端都不需要改，只需要运维团队把配置表改一下，需要服务器部署

2.建一个vue.config.js，文件名是不能改的
3.接口是自己的接口，但是会转接到其他地方
4.node.js是一个后端语言，没有限制，但是不同网站之间存在同源策略限制
5.有个好处在字符串拼接一个空的字符串，可以将请求地址变成一个混淆的地址，这样就最安全的

a.在vue中，新建或者进行修改vue.config.js

module.exports = {
  pages: {
    index: {
      //入口
      entry: 'src/main.js',
    },
  },
	lintOnSave:false, //关闭语法检查
	//开启代理服务器（方式一）
	// devServer: {
  //   proxy: 'http://localhost:5000'
  // }, 
	//开启代理服务器（方式二）
	devServer: {
    proxy: {
      '/atguigu': {
        target: 'http://localhost:5000',
				pathRewrite:{'^/atguigu':''},//重新路径-正则，匹配所有以atguigu开头的
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      },
      '/demo': {
        target: 'http://localhost:5001',
				pathRewrite:{'^/demo':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      }
    }
  }
}

b.使用

<template>
  
</template>

<script>
export default {
  name: "Search",
  data() {
    return {
      keyWord: "",
    };
  },
  mounted() {
    // this.$axios.get("http://localhost:5000/students").then((response) => {
    //   console.log(response);
    // });//请求会报跨域错误

	// 解决方法1 cors跨域
	// this.$axios.get("http://localhost:5000/students").then((response) => {
    //   console.log(response);
    // });
	//在服务器中app.get('/students',(request,response)=>{
		//response.header("Access-Control-Allow-Origin","*")//后端添加后，可以进行跨域
	//}

	//cors跨域
	// this.$axios.get("https://api.github.com/search/users?q=%E6%88%91").then((response) => {
    //   console.log(response);
    // });

	//方法二-反向代理
	this.$axios.get("/atguigu/students").then((response) => {
      console.log( response.data);//跨域获取成功
    })

	this.$axios.get("/demo/cars").then((response) => {
      console.log( response.data);//跨域获取成功
    })

c.其他扩张：

module.exports = {
    devServer:{
        host:'localhost',//访问主机
        port:8080,//端口
        proxy:{//代理-很重要
            '/api' :{
                target:'http://mall-pre.springboot.cn',//访问的接口
                changeOrigin:true,//是否将主机头的原点设置为目标url位置
                pathRewrite:{//转发地址
                    '/api':''//添加路径的时候，把/api转为空，会把api后面的地址当作真实地址，每个接口都会含/api
                }
            },
        }
    },
    // publicPath:'/app',//打包和预览的时候或者，子路径多出一个地址拼接/app
    outputDir:'dest',//整个环境打包完之后的输出路径原来是默认是dist   现在是dest文件
    // indexPath:'index2.html',//单页面的文件名
    lintOnSave:false, //关闭esli语法检查
    productionSourceMap:false,
    chainWebpack:(config)=>{//按需加载
        config.plugins.delete('prefetch')
    }

}

使用案例：

 this.$axios.get('carts').then((res)=>{
           this.renderData(res)
        })

四、其他

1. iframe解决跨域,有四种情况

a.location.hash
b.window.name
c.postMessage
d.document.domain

总结：

General(HTTP)HTTP响应

响应头(response headers)

请求头(request headers)

请求方式
请求地址
请求体

cors跨域方法是自己的服务器端跨域，那肯定可以+header解决
jsonp可以解决别人的服务器的跨域，相当于重新开一个浏览器去请求，然后把响应返回给你

空投在我怀里

关注

1
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
前端交互之“解决前端跨域的三种方法”

1.什么是前端跨域？跨域是浏览器为了安全而做出的限制策略：浏览器请求必须遵从同源测试：http://www.bilibili.com:8080：/anime/?key=calue路径键值对同协议、同域名、同端口2.ajax和fetch访问接口都会有跨域问题！一、CORS跨域-前端最省事1.概念：CORS是一个W3C标准，全称是"跨域资源共享"2.原理：它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制3.操作：服务端设置，
复制链接

扫一扫