jsonp，cors，nginx跨域
前端跨域
- JSONP
- CORS
- nginx
JSOP
浏览器端
<script>
function foo(data){
console.log(data)
}
</script>
<script src="http://localhost:8080/jsonp?callback=foo"></script>
服务器端
let http = require('http')
let url = require('url')
let querystring = require('querystring')
let server = http.createServer((req,res)=>{
//获取url路径
let urlPath = url.parse(req.url).pathname;
//获取url后面的回调
let qs = querystring.parse(req.url.split('?')[1]);
console.log(urlPath)
if(urlPath === '/jsonp' && qs.callback=="foo"){
res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});
var data = {
"name": "Monkey"
};
data = JSON.stringify(data);
//封装成一个方法传到前端
var callback = qs.callback+'('+data+');';
res.end(callback);
}
else{
res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
res.end('Hell World\n');
}
})
server.listen('8080')
console.log('服务端')
CORS
浏览器端 index.html文件
<div>我是在8080端口页面的div>
<script>
let xhr = new XMLHttpRequest()
//访问后端接口8081端口
xhr.open('get','http://localhost:8081');
xhr.setRequestHeader('Content-type','text/plain');
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.responseText)
}
}
script>
给前端开启一个端口号：8080
let http = require('http');
let fs = require('fs');
let server = http.createServer((req,res)=>{
console.log('客户端');
//读取前端文件放在端口8080上
let html = fs.readFileSync('./index.html','utf8')
res.writeHead(200,{
'Content-Type': 'text/html'
})
res.end(html)
}).listen(8080,()=>{
console.log(`服务器运行在 http://localhost:8080/`)
})
给服务器端开启一个8081服务
let http = require('http')
let server = http.createServer((req,res)=>{
console.log('服务端')
res.writeHead(200, {
'Content-Type': 'text/plain;charset=utf-8',//不加这个会返回乱码，因为下面返回的数据是中文
//白名单，允许http://localhost：8080访问
'Access-Control-Allow-Origin': 'http://localhost:8080'
})
//返回数据给前端
res.end('8081端口的数据')
}).listen(8081)
nginx
小编用的是原生的js写的，需要下载nginx，可到[http://nginx.org/en/download.html]去下载
下载解压，双击运行nginx.exe开启nginx服务
或者通过命令行运行
| 功能 | 命令 |
|---|---|
| 开启 | start nginx |
| 关闭 | nginx.exe -s quit |
| 重启 | nginx.exe -s reload(修改配置后需要重启才生效) |
nginx开启成功之后，会出现一个命令行闪退一下，在浏览器输入localhost:8090显示如下，则开启成功
注意：8090端口是因为我的nginx配置文件里面的端口号是8090，我的是1.16.1版本的，不同版本的端口号可能不一样，可以自己查看conf文件下的nginx.conf配置里面的端口号
浏览器端
<body>
<button onclick="btn()">发送请求button>
<script>
function btn(){
console.log('..')
//创建对象
let xhr = new XMLHttpRequest();
//打开链接
xhr.open('get','/user')
//设置请求头
xhr.setRequestHeader('Content-type','text/plain');
//发送数据
xhr.send('');
//接收响应数据
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status ==200){
console.log(xhr.responseText)
}
}
}
script>
body>
服务端
const http = require('http')
const port = 3000
const server = http.createServer((req,res)=>{
res.status = 200
res.setHeader('Content-Type','text/plain; charset=utf-8')
res.end('3000端口返回数据')
})
server.listen(port,()=>{
console.log(`服务器运行在 http://localhost:${port}/`)
})
nginx配置跨域
server {
listen 8090;
server_name localhost;
#允许跨域请求的域
add_header 'Access-Control-Allow-Origin' *;
#允许请求的方法
add_header 'Access-Control-Allow-Credentials' 'true';
#允许请求的header
add_header 'Access-Control-Allow-Headers' *;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
location /user {
proxy_pass http://localhost:3000;
}