前端跨域产生的原因和解决方法（前端解决跨域的几种办法）



文章目录

• 同源策略与跨域解决

• 1、同源策略概念

• 案例

• 2、解决跨域问题

• 2.1 方法一：jsonp解决跨域问题

• 原生html实现
• jquery实现
• vue实现

• 2.2 方法二：设置CORS响应头实现跨域

同源策略（Same-Origin Policy）最早由NEtscape公司提出，是浏览器的一种安全策略。同源指的是协议、域名、端口号必须完成相同，违背同源策略就是跨域。

案例

• server.js

• 页面文件index.html

浏览器输入，得到如下结果

2.1 方法一：jsonp解决跨域问题

• jsonp是什么
  jsonp（JSON with Padding），是一个非官方的跨域解决方法，纯粹凭借程序员的聪明才智开发处理，只支持get请求。
  
  
• jsonp工作原理
  在网页有一些标签自带跨域能力，例如img、link、iframe、script
  JSONP就是利用script标签的跨域能力来发送请求的。
  
  
  
  
  

原生html实现

例如：

案例一：

• 测试用html文件

• server.js文件【使用express框架模仿的服务器】

const express = require('express')const app = express() app.get('/jsonp-test',(request,response) => { // 响应一个字符串 response.send('hello jsonp') }) app.listen('8000',()=>{ console.log("服务启动，监听端口中..."); })

得到的结果报错，意思为不被期待的标识符，说的是script标签不能识别普通字符串

因为响应到页面的是一个字符串，而一个script标签是不能解析字符串的，而需要响应一个js代码，因此，server.js需要响应一个js代码的字符串

const app = express()app.get('/jsonp-test',(request,response) => { // const data = { // name:"小刘" // } response.send('console.log("hello jsonp")') // response.send(`handle(${data})`) }) app.listen('8000',()=>{ console.log("服务启动，监听端口中..."); })

成功获取结果

打开浏览器网络，可以看到成功获取响应了，并且响应式js代码

案例二：

• server.js

const express = require('express')const app = express() app.get('/jsonp-test',(request,response) => { const data = { name:"小刘" } // 将data转换为json字符串形式 const str = JSON.stringify(data) // 利用模板字符串，将调用方法以js代码的格式响应过去 response.send(`handle(${str})`) }) app.listen('8000',()=>{ console.log("服务启动，监听端口中..."); })

• test.html

查看浏览器网络，接收到的响应是一个方法调用的js代码，并且方法中的参数也是由另一端的服务器传过来的。

• 具体案例使用
• 案例描述：输入款输入用户名，判断用户名是否存在（这句逻辑就不写了）不存在，在输入框下显示"用户不存在"，输入框样式改变。
  步骤：
  （1）动态创建一个script标签
  （2）设置script的URL
  （3）将script标签添加到页面中
  
  
  
  
  
  
  
  
  
  
  
• 模拟服务器端代码【express框架实现】

• 页面代码

jquery实现

vue实现

2.2 方法二：设置CORS响应头实现跨域

• CORS是什么
  CORS（Cross-Oringin Resource Sharing），跨域资源共享。CORS是官方的跨域解决方案。
  
  

CORS特点是不需要再客户端做人任何特殊的操作，完全在服务器中进行处理，支持get和post请求，跨域资源共享标准增添了一组HTTP首部字段，允许服务器生命哪些源站通过浏览器有权限访问哪些资源。

• CORS工作原理
  CORS通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应后就会对响应’放行’
  
  
• CORS的使用

server.js

前端：

如果需要对所有的路由都解决跨域问题，那么可以写一个中间件，放在所有路由前面，如下

使用

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/51793.html