常见跨域介绍及处理方式

最新推荐文章于 2024-03-16 15:48:41 发布

阿伟520

最新推荐文章于 2024-03-16 15:48:41 发布

阅读量130

点赞数

分类专栏： js 文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/weixin_44868881/article/details/123573088

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、简单介绍

跨域即同源策略，是浏览器的核心安全功能，指的是一个域下的文档或脚本试图去请求另一个域下的资源，如果缺少了同源策略，浏览器很容易收到XSS、CSFR攻击，所谓同源是指"协议+域名+端口"三者相同，即使两个不同域名指向同一个ip，也非同源

2、处理跨域方式

1、JSONP(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据

请求示例：
<!DOCTYPE html>
<html>
   <head></head>
   <body>
   	<script>
         function getData(data) {
           console.log(data);
         }
       </script>
       <script src="http://localhost:8080/api/data?cb=getData"></script>
   </body>
</html>

服务端处理方式：
const http = require('http')
const url = require('url')

const app = http.createServer((req, res) => {
let urlObj = url.parse(req.url, true)

switch (urlObj.pathname) {
    case '/api/data':
      res.end(`${urlObj.query.cb}({"name": "gp145"})`)
      break
    default:
      res.end('404.')
      break
  }
})

app.listen(8080, () => {
  console.log('localhost:8080')
})

2、CORS

const http = require('http')
const url = require('url')
const querystring = require('querystring')

const app = http.createServer((req, res) => {
  let data = ''
  let urlObj = url.parse(req.url, true)

  res.writeHead(200, {
    'content-type': 'application/json;charset=utf-8',
    'Access-Control-Allow-Origin': '*'
  })

  req.on('data', (chunk) => {
    data += chunk
  })

  req.on('end', () => {
    responseResult(querystring.parse(data))
  })

  function responseResult(data) {
    switch (urlObj.pathname) {
      case '/api/login':
        res.end(JSON.stringify({
          message: data
        }))
        break
      default:
        res.end('404.')
        break
    }
  }
})

app.listen(8080, () => {
  console.log('localhost:8080')
})

3、middleware

const http = require('http')
const proxy = require('http-proxy-middleware')

http.createServer((req, res) => {
  let url = req.url

  res.writeHead(200, {
    'Access-Control-Allow-Origin': '*'
  })

  if (/^\/api/.test(url)) {
    let apiProxy = proxy('/api', { 
      target: 'https://m.lagou.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })

    // http-proy-middleware 在Node.js中使用的方法
    apiProxy(req, res)
  } else {
    switch (url) {
      case '/index.html':
        res.end('index.html')
        break
      case '/search.html':
        res.end('search.html')
        break
      default:
        res.end('[404]page not found.')
    }
  }
}).listen(8080)

阿伟520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见跨域介绍及处理方式

1、简单介绍跨域即同源策略，是浏览器的核心安全功能，指的是一个域下的文档或脚本试图去请求另一个域下的资源，如果缺少了同源策略，浏览器很容易收到XSS、CSFR攻击，所谓同源是指"协议+域名+端口"三者相同，即使两个不同域名指向同一个ip，也非同源2、处理跨域方式1、JSONP(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据请求示例：<!DOCTYPE html><html> ..
复制链接

扫一扫