关于前端跨域问题有什么好的解决办法

Question

Answer 1

为什么不问“如何安全的访问跨域资源”

辛辛苦苦写的服务，谁都能调用是不是有点儿生气。

所以这明显是一个前后端都需要关注且协同的问题，否则对于任意一方来说都是不公平的。那么常见的比如说CORS，在某种安全限定下进行资源共享，在请求头中通过特殊的字段让浏览器知道你可能和后端有一定的安全关系，然后通过策略进行安全的访问。

如果不能很好的进行一个安全的交流，那就从根上解决问题，在同一个域下进行资源访问。常见的比较nginx转发，而nginx的控制肯定也是建立在安全的基础上。

至于开发环境就随便弄吧，docker也行，nginx也行，起一个proxy也行，都是为了构造一个相同的域的环境。

所以没有必要一个人埋头研究前端怎么跨域，我就想绕过去，考虑考虑别人的感受，共同建设快乐而安全的体系。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

这里我只推荐这两种方式跨域，其它的跨域方式都还有很多但都不推荐，真心主流的也就这两种方式。

开发环境	生产环境
cors	cors
proxy	nginx

方案一：cors 全称为 Cross Origin Resource Sharing（跨域资源共享）。这种方案对于前端来说没有什么工作量，和正常发送请求写法上没有任何区别，工作量基本都在后端这里。每一次请求，浏览器必须先以 OPTIONS 请求方式发送一个预请求（也不是所有请求都会发送 options， cors），通过预检请求从而获知服务器端对跨源请求支持的 HTTP 方法。在确认服务器允许该跨源请求的情况下，再以实际的 HTTP 请求方法发送那个真正的请求。推荐的原因是：只要第一次配好了，之后不管有多少接口和项目复用就可以了，一劳永逸的解决了跨域问题，而且不管是开发环境还是正式环境都能方便的使用。详细 MDN 文档

但总有后端觉得麻烦不想这么搞，那纯前端也是有解决方案的。

方案二：在 dev 开发模式下可以下使用 webpack 的 proxy 使用也是很方便，参照 文档 就会使用了。但这种方法在生产环境是不能使用的。在生产环境中需要使用 nginx 进行反向代理。不管是 proxy 和 nginx 的原理都是一样的，通过搭建一个中转服务器来转发请求规避跨域的问题。

开发环境

• 本地开发的话如果你是框架之类的，直接使用proxy进行代理即可
• 如果没有使用框架以及webpack之类的，最简单的就是禁用谷歌浏览器的安全策略

生产环境

生产环境的话还是比较推荐nginx的

• nginx

比如后端地址为http://localhost:8089/mall_war/*.do
那么前端在代码里只需要访问/mall_war/*.do就可以，默认发的是部署服务器的ip来访问
然后再nginx里配置如下

server {
    listen       8066;
    server_name  commonFronted;
    # 项目静态资源目录
    location / {
        alias     /xxx/dist;
        index     index.html;
    }

    location ^~/mall_war/ {
        proxy_pass http://localhost:8089/mall_war/;
        proxy_set_header  Host $host;
        proxy_set_header  X-Real-IP $remote_addr;
        proxy_set_header  X-Forwarded-Proto https;
        proxy_set_header  X-NginX-Proxy true;
        proxy_buffers 256 4k;
        proxy_max_temp_file_size 0k;
        proxy_connect_timeout 30;
        proxy_send_timeout 60;
        proxy_read_timeout 60;
        proxy_next_upstream error timeout invalid_header http_502;            
    }
}

• 让后端支持cors请求，但是这种不是很乐观

---

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 3

后端不让跨域的话，纯前端是没办法的。如果不考虑发布后会不会跨域，只解决生产环境下的跨域问题，可以在构建工具中设置代理（vue.config、vite.config、webpack.config）进行跨域

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 4

需要在response 的头信息中设置 Access-Control-Allow-Origin: *

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 5

项目的话在vue.config.js下配置proxy

Answer 6

使用反向代理服务器，类似nginx
前端工程直接部署到nginx上
浏览器发起请求时，去请求nginx，由nginx转发到实际的后端工程

Answer 7

如果是本地开发遇到跨域问题，可通过webpack配置代理转发。
比如devServer的proxy配置。

Answer 8

生产环境:
后端不做处理,是无法解决跨域问题的。可以用CORS策略，即接受所有域名，协议，端口。也可以用Nginx反向代理。

开发环境:
proxy代理即可。

Answer 9

开发环境要嫌烦就直接nginx挂一串。。。

add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Credentials 'true';
#add_header Access-Control-Allow-Headers 'Keep-Alive,User-Agent,Cache-Control,Content-Type,Authorization';

其他需求根据需要加。。。

Answer 10

主要有以下几种方式

1、后端代码中设置
'Access-Control-Allow-Origin': '*'

2、nginx服务配置中设置

add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

3、前端设置代理
vue 中常通过配置 proxy 去代理

4、通过没有跨域的语言中转

比如通过php中转，php是没有跨域的

你可以通过 http://localhost 访问 http://localhost/a.php 文件

然后再 a.php 文件中去访问资源，再返回结果

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 11

使用nginx反向代理接口跨域。以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。通过nginx配置一个代理服务器，反向代理访问接口，实现跨域。保护了真实的web服务器，保证了web服务器的资源安全
已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 12

使用JSONP应该可以绕过。

Answer 13

在生产线上环境下:
首先需要后台设置支持跨域。使用Nginx反向代理来解决前端跨域问题。
在测试开发环境下:
直接在config文件中设置proxy代理即可。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 14

方法有很多：

1. jsonp（推荐）
   引入jsonp这个npm包，直接发起跨域请求就可以了
2. nginx代理（推荐）
   nginx将接口转发到页面域名下
3. 后端或者nginx设置允许跨域（不推荐）
   Access-Control-Allow-Origin:*

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 15

vue.config.js下配置：

module.exports = {
    productionSourceMap: false, 
    ...,
    devServer: {
           proxy: 'https://api.xxxxxx.com/apiTest' // 代理
    },
    ...
}

axios 里的 baseURL

cosnt baseURL = ''; // 等于空就好了

const postApi = (url, data, method) => {
  return axios({
    url: baseURL + url,
    method: 'POST',
    data: qs.stringify(data)
  })
}

参考链接：devServer.proxy