解决跨域问题的方法 --- CORS

解决跨域的方式有很多种，本篇主要介绍 CORS ：

CORS 全称是"跨域资源共享"（Cross-origin resource sharing）。
CORS需要浏览器和服务器同时支持。但是目前基本上浏览器都支持，所以我们只要保证服务器端服务器实现了 CORS 接口，就可以跨源通信。

在数据包的头部配置Access-Control-Allow-Origin字段以后,数据包发送给浏览器后，
浏览器就会根据这里配置的白名单 "放行" 允许白名单的服务器对应的网页来用ajax跨域访问。

CORS解决跨域问题，就是在服务器端给响应添加头信息。

Access-Control-Allow-Origin 允许请求的域
        Access-Control-Allow-Methods 允许请求的方法
        Access-Control-Allow-Headers 预检请求后，告知发送请求需要有的头部
        Access-Control-Allow-Credentials 表示是否允许发送cookie，默认false；
        Access-Control-Max-Age 本次预检的有效期，单位：秒；

router.js文件夹：

var fs=require("fs")
var url=require("url")
var querysting=require("querystring")
var mime=require("mime")
let urls={}
var http=require("http")let router=function(req,res){//这个函数每次用户访问时运行let pathname=url.parse(req.url).pathnamefs.readFile(router.basepath+pathname,(err,data)=>{if(!err){res.setHeader("content-Type",mime.getType(pathname))res.end(data)}else{if(!urls[pathname]){res.end("404 not found-mymvc")}else{urls[pathname](req,res)}}})
}
router.static=function(path){this.basepath=path
}router.get=function(url,cb){urls[url]=cb
}
router.basepath=__dirname+"/public"
http.createServer(router).listen(8081)
module.exports=router;

test1文件夹中的index.js文件：

var router = require("./router.js")router.get("/ajax1",function(req,res) {res.end('{"name":"xiaozhang","age":21}')
})

test2文件夹中public文件夹中的index.html文件：

<button onclick="fn()">跨域ajax请求</button><script>function fn() {var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP")xhr.open("GET","http://192.168.0.114:8081/ajax1",true)xhr.send()xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {console.log(xhr.responseText);}}}</script>

未设置CORS时，会报跨域错误：

在test1的index.js文件中设置CORS后就可以访问到数据：

var router = require("./router.js")router.get("/ajax1",function(req,res) {res.setHeader("Access-Control-Allow-Origin","http://192.168.0.114:8082")res.end('{"name":"xiaozhang","age":21}')
})

解决跨域问题的方法 --- CORS相关推荐

前端百题斩【027】——解决跨域的常用利器CORS全解
写该系列文章的初衷是"让每位前端工程师掌握高频知识点,为工作助力".这是前端百题斩的第27斩,希望朋友们关注公众号"执鸢者",用知识武装自己的头脑. 27.1 ...
迁移学习与跨域推荐，以及解决跨域推荐的方法
本文主要是详细介绍一下跨域推荐,包含但不局限于以下几个部分: 迁移学习跨域推荐跨域推荐可以怎么做冷启动的其他一些方法可以参考的论文有哪些 1. 迁移学习以下内容参考[推荐系统中的多任务学习- ...
Nginx 方向代理解决跨域问题-2
概述在浏览器端进行 Ajax 请求时会出现跨域问题,那么什么是跨域,如何解决跨域呢?先看浏览器端出现跨域问题的现象,如下图所示什么是跨域问题? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览 ...
Vue项目生产环境解决跨域问题
一.前言第一次写vue项目,开发完成.打包上线后,一访问,发现访问后端的请求全部报404.我就纳闷了,跨域问题我已经解决了,怎么就报错了.查阅资料,得知我解决的跨域仅适用于开发环境. ememem. ...
继承WebMvcConfigurer 和 WebMvcConfigurerAdapter类依然CORS报错? springboot 两种方式稳定解决跨域问题
继承WebMvcConfigurer 和 WebMvcConfigurerAdapter类依然CORS报错???springboot 两种方式稳定解决跨域问题! 之前我写了一篇文章,来解决CORS报错 ...
深入跨域问题(2) - 利用 CORS 解决跨域
阅读目录: 深入跨域问题(1) - 初识 CORS 跨域资源共享: 深入跨域问题(2) - 利用 CORS 解决跨域(本篇) 深入跨域问题(3) - 利用 JSONP 解决跨域深入跨域问题(4) - ...
Springboot 利用CORS 解决跨域问题
什么是跨域首先我们先用springboot 建立1个简单的API, 它返回1个json package com.example.demo_api_cors.controller;import com ...
cors跨域_Spring Boot 中通过 CORS 解决跨域问题
(给ImportNew加星标,提高Java技能) 转自:江南一点雨今天和小伙伴们来聊一聊通过CORS解决跨域问题. 同源策略很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的, ...
springboot中通过cors协议解决跨域问题
2019独角兽企业重金招聘Python工程师标准>>> 1.对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现. 针对跨域问题,我们可 ...

解决跨域问题的方法 --- CORS

解决跨域问题的方法 --- CORS相关推荐

最新文章

热门文章