美文网首页
11 跨域问题简介及常用的解决方案

11 跨域问题简介及常用的解决方案

作者: 辣瓜瓜 | 来源:发表于2019-12-22 22:35 被阅读0次

使用devServer解决跨域问题

在开发阶段很多时候需要使用到跨域,何为跨域?请看下图:
图片1

跨域问题的出现主要是由于浏览器的安全机制同源策略,使用http proxy是借用webpack-server服务器转发到接口服务器,这样避开了浏览器的同源策略问题,变成两个服务器间的交互,从而解决跨域问题。

开发阶段往往会遇到上面这种情况,也许将来上线后,前端项目会和后端项目部署在同一个服务器下,并不会有跨域问题,但是由于开发时会用到webpack-dev-server,所以一定会产生跨域的问题

目前解决跨域主要的方案有:

  1. jsonp(淘汰)
  2. cors(最主流)
  3. http proxy
    此处介绍的使用devServer解决跨域,其实原理就是http proxy

将所有ajax请求发送给devServer服务器,再由devServer服务器做一次转发,发送给数据接口服务器

由于ajax请求是发送给devServer服务器的,所以不存在跨域,而devServer由于是用node平台发送的http请求,自然也不涉及到跨域问题,可以完美解决!

图片2

模拟cors

服务器代码(返回一段字符串即可):

安装
npm i cors -S

const express = require('express')
const app = express()
const cors = require('cors')
app.use(cors())
app.get('/api/getUserInfo', (req, res) => {
  res.send({
    name: '1111',
    age: 13
  })
});
 
app.listen(9999, () => {
  console.log('http://localhost:9999');
});
http proxy

前端需要配置devServer的proxy功能,在webpack.dev.js中进行配置:

devServer: {
    open: true,
    hot: true,
    compress: true,
    port: 3000,
    // contentBase: './src'
    proxy: {
      '/api': 'http://localhost:9999'
    }
  },

意为前端请求/api的url时,webpack-dev-server会将请求转发给 http://localhost:9999/api处,此时如果请求地址为http://localhost:9999/api/getUserInfo,只需要直接写/api/getUserInfo即可,如下:

axios.get('/api/getUserInfo')
    .then(result => console.log(result))

如果服务器地址都是一级域名,前面并没有统一的/api,可以增加pathRewrite更简便;此时如果请求地址为http://localhost:9999/api/getUserInfo,服务器会转发为http://localhost:9999/getUserInfo,代码如下:

proxy: {
      '/api': {
          target:'http://localhost:9999',
          pathRewrite:{
              '^/api':''
          }
      }
    }

仅适用于开发环境,生产环境中需要把代码和服务器代码部署到一起,否则也可以通过Nginx进行跨域的转发。







相关文章

  • 11 跨域问题简介及常用的解决方案

    使用devServer解决跨域问题 在开发阶段很多时候需要使用到跨域,何为跨域?请看下图:图片1 跨域问题的出现主...

  • JWT简记

    JSON Web Token(JWT)是目前最流行的跨域认证解决方案。 跨域认证问题及传统解决方案 传统认证流程 ...

  • 跨域问题,解决方案

    跨域问题,解决方案 - Nginx反向代理跨域问题,解决方案 - CORS方案此为原作者的链接:跨域问题,解决之道

  • Webpack 配置 proxy 代理解决跨域问题

    问题 JS跨域及解决方案[https://www.jianshu.com/p/0e9a368ffb74]介绍了跨域...

  • Web前后端跨域问题处理

    跨域问题有前台跨域(iframe间)和后台跨域。 前台跨域的解决方案可以采用跨域文档通讯(Cross domain...

  • 开发环境跨域和生产环境跨域

    开发环境跨域 前后端分离,IP地址不同,请求数据必然导致跨域问题;解决方案:proxy设置 生产环境跨域 解决方案...

  • Js请求跨域问题

    一、请求跨域问题概述 跨域:指的是协议名、端口或者域名不一致的情况都是跨域。 二、跨域问题的解决方案 1、同域代理...

  • 跨域方案

    解决跨域问题常用的解决方案: CORS:服务器设置HTTP响应头中Access-Control-Allow-Ori...

  • 跨域问题

    内容主要来源于:ajax跨域完全讲解本文主要讲解跨域的产生问题及解决思路,并不直接给出某个具体问题的解决方案 1....

  • 2、JS-Web-API知识点

    跨域问题:跨域的解决方案?教程: https://www.imooc.com/video/6238https://...

网友评论

      本文标题:11 跨域问题简介及常用的解决方案

      本文链接:https://www.haomeiwen.com/subject/yfjkdctx.html