前言

难以置信，被跨域问题折磨了一早上。 相信很多程序员都遇到过跨域问题。 当然，有很多解决方案。 但是今天试了无数方法，还是解决不了。 直到最后儿媳妇给了我一个提示，跨域问题是否只是表象，真正的bug在别处。 后来仔细排查，终于发现是框架的一个小问题，导致了跨域报错（文章最后会讲到框架的问题）。 那我也借此机会和大家聊聊什么是跨域问题，有哪些常见的解决方法。

什么是跨域

什么是快乐星球，呸，什么是跨域？

简单的说，跨域就是指从一个域名的网页请求另一个域名的资源。 比如从百度()页面请求我博客()的资源。 但是由于同源策略，这种直接访问一般是不允许的。

什么是同源策略

一句话，同源就是协议、域名、端口相同。

为什么要有同源策略

试想一下，如果你刚刚在网银输入了你的账户密码，查看你还有10000元，然后访问一些不法网站，这个网站可以访问刚才的网银网站，并获取到账户密码，那么后果是什么？可想而知。 因此，从安全的角度来看，同源策略有利于保护网站信息。

为什么要跨域

但是

最新软件下载

，在某些情况下，我们需要跨域访问。 例如，开发网站的程序员可能需要在本地访问服务器数据。 又比如某公司的A页()可能需要获取B页()。

跨域问题的四种解决方法一、浏览器插件

谷歌浏览器有一个跨域插件Allow CORS: --Allow-。 这个插件使得在 web 应用程序中执行跨域 Ajax 请求变得容易。 请注意，当您将加载项添加到浏览器时，它默认处于非活动状态（工具栏图标是一个灰色的 C 字母）。 要激活插件安装两个谷歌浏览器吗，请单击工具栏上的图标。 该图标将变为橙色 C 字母。

如果你没有梯子， 打不开，那么请试试这个 Allow CORS: --Allow- ,Allow CORS: --Allow- - Fan。 从第三方网站下载插件，然后在谷歌浏览器中离线安装。

2.网络服务器软件

以Nginx为例，只需要在Nginx的配置文件中配置如下参数：

location / {  
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    if ($request_method = 'OPTIONS') {
        return 204;
    }
} 

3、后台框架运行

以PHP为例，只需要在文件开头添加如下代码：

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:OPTIONS, GET, POST');
header('Access-Control-Allow-Headers:x-requested-with');

由于我正在使用（Pie ） - 用于 PHP 的轻量级开源接口框架 - 接口安装两个谷歌浏览器吗，从简单开始！ ，按照本教程，你可以轻松解决跨域问题。

图像

4.前端框架运行

以Vue为例，修改vue..js文件如下：

devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    overlay: {
        warnings: false,
        errors: true
    },
    proxy: {
        '/api': {
            target: 'http://blog.pangao.vip',
            ws: true,
            changOrigin: true,
            pathRewrite: {
            '^/api': ''
            }
        }
    }
}

需要用到的地方改用api，比如修改.env。 文件如下：

VUE_APP_BASE_API = 'api'

后记

最后说一下框架中的问题。 用过框架的朋友一定知道，url路由的访问方式是：

http://dev.phalapi.net/?service=App.Usre.Login

但出于某种原因，我需要通过以下方式访问：

http://dev.phalapi.net/App/User/Login

当然，框架官网上也写的很清楚，需要做什么操作才能达到这个效果。 结果我忘了设置它。

图像

图像

结尾

媳妇说，一个就是一个，事业蒸蒸日上，飞机飞翔；

媳妇说五就是五，这样路虎就可以开起来了。

更多内容请访问跨域问题的四种解决方案-盘高网站。