博客
关于我
跨域是什么和跨域解决方案
阅读量:290 次
发布时间:2019-03-01

本文共 2403 字,大约阅读时间需要 8 分钟。

跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。同源策略:是指协议,域名,端口都要相同,其中有一个不同都会产生跨域;

下面我用express框架来进行演示:

server.js:

const express = require('express')const app = express()app.use(express.static(__dirname))app.listen(90)const app2 = express()//91端口的服务   返回数据app2.get("/",function(req,res){    res.send("你好")})app2.listen(91)

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>Document</title></head><body>    <h1>大家好</h1></body><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>    axios.get('http://localhost:91/').then(res=>console.log(res))</script></html>
90端口显示的是我们的index.html页面,91端口是我们的数据,现在我想通过axios从90端口拿到91端口的数据,结果浏览器告诉我们发生了跨域(端口不同)

kuayu
这时候我们要想解决办法:

CORS

修改响应头

浏览器告诉我们没有 Access-Control-Allow-Origin请求头,那么我们就加一个嘛。
const express = require("express");const app = express();app.use(express.static(__dirname));app.listen(90);const app2 = express();//91端口的服务   返回数据app2.get("/", function (req, res) {  res.header("Access-Control-Allow-Origin", "*");  res.send("你好");});app2.listen(91);

这样我们就可以拿到数据

jieguo

JSONP

想用jsonp,我们就要了解一个现象:我们通过href或者src去请求下来的脚本或者css文件或者image再或者视频文件等都不存在跨域问题,只有通过ajax请求下来的数据才会发生跨域问题
思路:把要发送的数据放在函数中,在客户端通过调用函数来获得数据。来看代码:

server.js

const express = require("express");const app = express();app.use(express.static(__dirname));app.listen(90);const app2 = express();//91端口的服务   返回数据app2.get("/", function (req, res) {   var name = req.query.callback;  res.send(name+'("hhh")');});app2.listen(91);

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>Document</title></head><body>    <h1>大家好</h1></body><script>    function f(data) {        console.log(data)    }</script><script src="http://localhost:91?callback=f"></script></html>

这里边 req.query.callback,req.query.内容,这个内容就是http://localhost:91? 后边的内容。比如我们在服务端传的是callback,那么我们接受时就用?callback=aa(这个名字就随便了)。TIPS:我们引入时src要在函数的下边。

nginx

这个是我做的uni-app项目部署到我的服务器上时,遇到的问题。我只想把前端放到我的服务器上,后端部署到了另外一个项目,这就涉及到了跨域。
// api请求前缀	// #ifdef H5	webUrl:'/api',

我使用了nginx来做代理:

  location /api {            proxy_pass https:/xxx.xxx.cn/api/v1;        }

当我们请求的路径为/api时,我们会让设置的https:/xxx.xxx.cn/api/v1来代替请求。

转载地址:http://eflo.baihongyu.com/

你可能感兴趣的文章
Mysql学习总结(5)——MySql常用函数大全讲解
查看>>
Mysql学习总结(60)——并发量大、数据量大的互联网业务数据库设计规范总结
查看>>
Mysql学习总结(61)——MySQL优化之DBA级优化整理汇总
查看>>
Mysql学习总结(62)——MySQL连接com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link问题
查看>>
Mysql学习总结(63)——Mysql数据库架构方案选择与分析
查看>>
Mysql学习总结(64)——Mysql配置文件my.cnf各项参数解读
查看>>
Mysql学习总结(65)——项目实战中常用SQL实践总结
查看>>
Mysql学习总结(66)——设置MYSQL数据库编码为UTF-8
查看>>
Mysql学习总结(67)——MYSQL慢查询日志
查看>>
Mysql学习总结(68)——MYSQL统计每天、每周、每月、每年数据 SQL 总结
查看>>
Mysql学习总结(69)——Mysql EXPLAIN 命令使用总结
查看>>
Mysql学习总结(6)——MySql之ALTER命令用法详细解读
查看>>
Mysql学习总结(70)——MySQL 优化实施方案
查看>>
Mysql学习总结(71)——MySQL 重复记录查询与删除总结
查看>>
Mysql学习总结(71)——数据库介绍(MySQL安装 体系结构、基本管理)再回顾
查看>>
Mysql学习总结(72)——MySQL 开发者开发,设计规范再总结
查看>>
Mysql学习总结(73)——MySQL 查询A表存在B表不存在的数据SQL总结
查看>>
Mysql学习总结(74)——慢SQL!压垮团队的最后一根稻草!
查看>>
Mysql学习总结(75)——并发量大、数据量大的互联网业务数据库设计军规
查看>>
Mysql学习总结(76)——MySQL执行计划(explain)结果含义总结
查看>>