js跨域访问问题

什么是跨域访问

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。如果进行跨域访问，浏览器会报跨域访问异常

NO ‘Access Control-Allow-Origin‘ ....
CORS:Cross-orign resource sharing跨域分享资源

总之，当前页面你发送请求时只要协议、域名、端口号有一个与当前页面不一致都属于跨域访问。

后端解决方法

在Controller层的处理器上解决

后端解决方式一

//解决方法一：http://localhost:9105也可设置为*，表示那个域可以进行跨域访问，但是*号不能用cookie,允许访问的域
response.setHeader("Access-Control-Allow-Origin", "http://localhost:9105");
//----如果用了cookie信息-----，必须加后面这句话，如果不用cookie可以不加这句话
response.setHeader("Access-Control-Allow-Credentials", "true");

后端解决方式二

//解决方法二：在处理器方法上加注解，allowCredentials="true"，默认为false
@CrossOrigin(origins="http://localhost:9105",allowCredentials="true")

在端口号为9105的web前端也要处理，以angularJS为例，在Service.js中添加如下内容{‘withCredentials‘:true}

//而且客户端的请求也需要加参数{‘withCredentials‘:true} )
$http.get(‘http://localhost:9107/cart/addItemToCartList.do?itemId=‘+?+‘&num=‘+? ,{‘withCredentials‘:true} ).success.....

服务器反向代理

1、nginx反向代理解决跨域问题，找到nginx的配置文件“nginx.conf”，修改一下信息：

server {
    server_name_in_redirect off;
    location / {
        # 将下面的模板改为修改为你的项目地址
        # alias /path/to/your/project/; 
        alias /home/myProject/firmwareDepthAnalysisAndDetection/; //这是我的地址
    }
    location /api {
        rewrite /api/(.+)$ /$1 break;
        proxy_pass http://10.10.2.254:8080; //这里写自己要访问的接口api
    } 
}

2、使用node.js实现反向代理，选用安装http-proxy模块

npm install http-proxy

代码：

// 导入http模块
var http = require('http');
// 导入http-proxy模块
var httpProxy = require('http-proxy');

// 提供服务的端口号
var PORT = 1234;

// 创建反向代理服务
var proxy = httpProxy.createProxyServer();
// 监听错误事件
proxy.on('error', function (err, req, res) {
    // 输出空白响应数据
    res.write('error!');
    res.end();
});

// 创建服务
var app = http.createServer(function (req, res) {
    // 执行反向代理
    proxy.web(req, res, {
        // 目标地址
        target: 'http://localhost:8080'
    });
});

// 启动服务
app.listen(PORT, function () {
    console.log('server is running at %d', PORT);
});

总结：创建了一个提供反向代理功能的服务器，该服务器启动后监听1234端口，接收到请求之后，将请求转发至目标地址（target）

JSONP

JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。

JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

JSONP目前还是比较流行的跨域方式，虽然JSONP使用起来方便，但是也存在一些问题：
首先， JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃 JSONP 调用之外，没有办法追究。因此在使用不是你自己运维的 Web 服务时，一定得保证它安全可靠。

其次，要确定 JSONP 请求是否失败并不容易。虽然 html5 给<script>元素新增了一个 onerror事件处理程序，但目前还没有得到任何浏览器支持。为此，开发人员不得不使用计时器检测指定时间内是否接收到了响应。

链接: https://www.fly63.com/article/detial/4480