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服务
jsonp,cors,nginx跨域_第1张图片
或者通过命令行运行

功能 命令
开启 start nginx
关闭 nginx.exe -s quit
重启 nginx.exe -s reload(修改配置后需要重启才生效)

nginx开启成功之后,会出现一个命令行闪退一下,在浏览器输入localhost:8090显示如下,则开启成功
注意:8090端口是因为我的nginx配置文件里面的端口号是8090,我的是1.16.1版本的,不同版本的端口号可能不一样,可以自己查看conf文件下的nginx.conf配置里面的端口号
jsonp,cors,nginx跨域_第2张图片
浏览器端

<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;}

你可能感兴趣的:(前端,面试,跨域,nginx,前端,nodejs,web)