跨域开发的几种解决方案

做者：颜亦浠@毛豆前端

本地开发过程当中，最常遇到的就是出现跨域，没法请求的问题。如何解决在开发中遇到的跨域问题，今天整理了4种解决方法，供你们参考。

1、何为跨域

跨域出于浏览器的同源策略的限制，浏览器自己会限制跨域请求（严格来讲，只是限制跨域的读操做）。那么何为跨域呢?非同源请求均为跨域，即:若是两个请求的协议、域名、端口号只要有一个不一样，即为非同源即为跨域。

2、常看法决跨域方案

通常多用于本地自测或者先后端开发部署均为分离的状况

一、webpack的proxyTable方案

在通常项目中都会有webpack对应的开发环境的配置文件：webpack.dev.js，在配置项中加入ProxyTable的配置项便可：

proxy: {
          '/api': {
          changeOrigin: true,
          target: 'http://******.*****.com',
    }
}
复制代码

若是先后端前缀不匹配或者后端前缀不统一的状况，能够增长pathRewrite属性来统一：

proxy: {
            '/EntryApp': {
              changeOrigin: true,
              target: 'http://******.*******.com',
              pathRewrite: {"^/EntryApp": "/EntryApp"}
        },
    }
复制代码

proxyTable实现跨域可能存在的问题：

1.cookie丢失,接口没法访问

2.post请求报403错

二、Switchhosts工具

SwitchHosts是一个管理、快速切换Hosts小工具，软件开源，能够实现一键切换Hosts配置。SwitchHosts须要管理本机的ip和端口的映射，因此须要以管理员身份运行。

打开SwitchHosts以后,须要在Myhost当中配置对应的映射，当左手边处于打开状态的时候，文件是处于只读的状态,须要编辑的话,就须要让文件处于关闭状态，不一样环境还能够分文件配置，直接照下图配置便可：

SwitchHosts使用中可能会遇到的问题：

1.端口号默认为80，若是不是，须要配置上对应的端口号

2.浏览器会有先考虑代理工具的代理。

三、Uuaper

uuaper是百度提供的一款基于nodejs，用于解决前端跨域问题的工具。具体的安装与配置能够去npm官网查找Uuaper,使用中须要结合nodejs，并须要具备自动认证功能：

var express = require('express');
var app = express();
 
var uuaper = require('uuaper');
    app.use('/api', new uuaper({
        target: 'http://xxx.xxx.com/',
        debug: true,
        auth: {
        server: 'http://xxx.baidu.com/login?',
        username: 'xxx',
        password: 'xxx',
    }
}));
复制代码

四、Nginx

Nginx是一个免费的，开源的高性能的HTTP和反向代理服务器。

一般，线上先后端分开部署时，用nginx比较多。

nginx.conf是主配置文件，有若干个部分组成，每一部分都用{}区分。主要包括:

• main：nginx的全局配置，对全局生效
• events：影响nginx服务器或与用户的网络链接
• http：能够嵌套多个server,配置代理，缓存，日志等
• server：配置虚拟主机的相关参数，一个http能够有多个server

nginx解决跨域的基本方法是在sever中配置proxy_pass:

// 前端服务的域名为 fe.**.com
// 后端服务的域名为 dev.**.com
server {
    listen: 80,
    server_name: fe.**.com,
    location / {
         proxy_pass dev.**.com
    }
}
复制代码

根据实际需求，还能够添加一些其余的指令，好比：

• proxy_connect_timeout：nginx从接受请求至链接到上游服务器的最长等待时间
• proxy_cookie_domain：替代上游服务器的set_cookie头的domain属性
• proxy_cookie_path：替代上游服务器的set_cookie头的path
• proxy_set_header：重写发送到上游服务器头的内容，也能够经过将某个头部的值设置为空字符串，而不发送某个头部的方式发放实现