解决跨域的三种方法

最新推荐文章于 2024-07-17 16:37:19 发布

小杨程序员

最新推荐文章于 2024-07-17 16:37:19 发布

阅读量630

点赞数

文章标签：前端服务器

本文链接：https://blog.csdn.net/m0_71144319/article/details/130140085

版权

解决跨域方法

一.为什么会产生跨域问题

其实就是出于浏览器自身的的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

当一个请求的url的协议、域名、端口三者只要有一个与当前页面的url不同则会出现跨域问题

在这里插入图片描述

二.解决跨域的方式

2.1在服务端设置请求头，一般都是用于项目测试阶段。
Access-Control-Allow-Credentials属性代表后端允许发送Cookie
Access-Control-Allow-Origin属性代表允许访问的域（协议+域名+端口）如果设置为*代表允许全部访问
Access-Control-Allow-Methods属性代表允许请求的方式

小栗子：

2.1cors解决跨域

html部分

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

src="/home.js"></script>

</body>

</html>

js部分

// 开始发送请求

function fn() {

const xhr = new XMLHttpRequest()

xhr.open('GET', 'http://localhost:8081/list')

xhr.onload = function () {

const res = JSON.parse(xhr.responseText)

console.log(res)

}

xhr.send()

}

fn()

// 开始发送请求

function fn2() {

const xhr = new XMLHttpRequest()

xhr.open('GET', 'http://localhost:8081/info')

xhr.onload = function () {

const res = JSON.parse(xhr.responseText)

console.log(res)

}

xhr.send()

}

fn2()

css部分

body {

background-color: skyblue;

}

node部分

注意: 数据接口服务器, 负责提供 STATIC 8080

// 导入响应的模块

const http = require('http')

const path = require('path')

const url = require('url')

const fs = require('fs')

// 创建服务

const server = http.createServer((req, res) => {

// 1. 拿到本次请求的请求地址(地址和参数分开)

const { pathname } = url.parse(req.url, true)

// 2. 根据拿到的单独的请求地址, 解析出后缀名

const { ext } = path.parse(pathname)

// 3. 根据不同的后缀准备不同的文件夹路径

let dirname = ''

switch (ext) {

case '.html': dirname = 'views'; break

case '.css': dirname = 'css'; break

case '.js': dirname = 'js'; break

}

// 4. 判断准备返回给前端

if (/^\.(html|css|js)$/ig.test(ext)) {

fs.readFile(`./client/${ dirname }/${ pathname }`, 'utf-8', (err, data) => {

if (err) return console.log(err)

// 把读取到的文件内容返回给前端

res.end(data)

})

}

})

// 监听端口号

server.listen(8080, () => console.log('启动服务器成功 ^_^'))

2.2JSONP

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。

核心思想：网页通过添加一个< script >元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。JSONP是解决跨域的方法之一，它与AJAX并无任何关联。

2.3proxy

代理服务器，跨域问题是浏览器的同源策略限制，服务器之间是没有的，那我们先把请求给我们的代理服务器，再让我们的代理服务器去调用这个接口，在发送给前端就可以了。不能和其它跨域方式并存。

module.exports = [

{

// 你要我代理的目标地址

target: 'http://localhost:8081/list',

// 代理标识符

source: '/xhl'

{

// 你要我代理的目标地址

target: 'http://localhost:8081/info',

// 代理标识符

source: '/gx'

{

// 你要我代理的目标地址

target: 'http://localhost:8081/add',

// 代理标识符

source: '/abc'

}

]

跨域这个问题，其实就是浏览器自己本身造成的，解决跨域的常用的就三种它们的占比：cors占4成，jsonp占2成，proxy占4成。（部分代码替换即可未展示）欢迎大家来讨论呦

小杨程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决跨域的三种方法

其实就是出于浏览器自身的的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。
复制链接

扫一扫